Dashboard component renders too, while I am entering /login. I need to omit Dashboard component while in Login.
Exact attribute does not fit because Dashboard has nested paths like /dashboard/users, /dashboard/settings
<BrowserRouter>
<Route path='/'>
<div>
<Route path='/login' component={Login} exact />
<Route path='/' component={Dashboard} />
</div>
</Route>
</BrowserRouter>
You could use Switch to render the first matching Route
<BrowserRouter>
<Route path='/'>
<div>
<Switch>
<Route path='/login' component={Login} exact />
<Route path='/' component={Dashboard} />
</Switch>
</div>
</Route>
</BrowserRouter>
Related
So I'm working an a project where the user should click the link and than should go on the login or create account page. I'm using routing for that but as soon as I put Routes to use route and add the navigation link there my webpage turns blank:
That was the code and this is the page at the moment:
No error shown no nothing! help pls!
First I used Switch than the webpage didn't allow me to use it, so I changed to Routes
Instead of
<Routes>
<Route path="login" exact>
<Login />
</Route>
<Route path="create" exact>
<Signup />
</Route>
</Routes>
It should be like
<Routes>
<Route exact path="login" element={<Login />} />
<Route path="/create" element={<Signup />} />
</Routes>
Here is a link to code sandbox
Here is how to render pages without navbar
So i wrote it wrong instead it should be written like this:
<Routes>
<Route exact path="login" element={<Login />} />
<Route path="/create" element={<Signup />} />
</Routes>
But everything else that is outside the Routes will be render in the other page too, this is very useful for navbar!
I have routes in App.js mainly Logout, Signin and Home.
Inside App.js :
return(
<>
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/signin' component={Signin} />
<Route exact path='/logout' component={Logout} />
</Switch>
</>)
Also, I want Routes inside Home.js :
return(
<>
<Navbar/>
<Switch>
<Route exact path='/'>
<LandingPage />
</Route>
<Route exact path='/settings'>
<Settings username={username} />
</Route>
</Switch>
</>
)
The LandingPage component is default for Home page, and Navbar is common in both LandingPage and Settings.
LandingPage component is showing perfectly but when I click "settings" button from Navbar, the Settings component is not showing. Other Routes are working fine.
Inside Navbar I used NavLink:
<NavLink className="nav-link" to="/">
HOME
</NavLink>
<NavLink className="nav-link" to="/settings">
SETTINGS
</NavLink>
Why the Settings Component is not showing ???
<Route exact path='/' component={Home} />
Because of the exact flag, anything that isn't precisely "/" will not match this. So when the url becomes "/settings", you stop rendering your Home component, which in turn means there's nothing trying to render a route at "/settings"
The likely fix is to remove the exact, and also rearrange your components so this case comes after the sign in/sign out cases:
<Switch>
<Route exact path='/signin' component={Signin} />
<Route exact path='/logout' component={Logout} />
<Route path='/' component={Home} />
</Switch>
I'm writing an app that has a master / detail type setup.
I want two different routes:
/items Item listing page (all items)
/items/item-slug Item detail page (single item)
I have the following config:
<Route name="app" component={App} path="/">
<IndexRoute component={ItemList} />
<Route name="itemList" component={ItemList} path="items">
<Route name="itemDetail" component={ItemDetail} path=":itemSlug" />
</Route>
</Route>
The listing route works but the item route is never reached (shows listing page instead of item page).
Everything works as expected with the following structure:
<Route name="app" component={App} path="/">
<IndexRoute component={ItemList} />
<Route name="itemList" component={ItemList} path="items" />
<Route name="itemDetail" component={ItemDetail} path="items/:itemSlug" />
</Route>
... but after reading react-router's documentation I was under the impression that I could use nesting to my favour.
Are there any modifications I can make to the first snippet so that the routing works as expected, or is the second snippet the correct way to address this functionality?
Assuming that you don't want to nest ItemDetail inside ItemList, you can't nest one inside the other. What I would do is something like this:
<Route name="app" component={App} path="/">
<IndexRedirect to="items" />
<Route path="items">
<IndexRoute name="itemList" component={ItemList} />
<Route name="itemDetail" component={ItemDetail} path=":itemSlug" />
</Route>
</Route>
Try
<Route name="app" component={App} path="/">
<IndexRoute component={ItemList} />
<Route name="itemList" component={ItemList} path="items">
<Route name="itemDetail" component={ItemDetail} path=":itemSlug" />
</Route>
</Route>
Stripping the items/ path component from the itemDetail route
As you are nesting routes the parent component needs to have the children rendered.
So in ItemList component you need to add to the render function {this.props.children} to render out ItemDetail
so
render(){return(<div>{this.props.children}</div>});}
Im trying to implement react-router and something is missing. I cannot browse to
domain.com/projects/-KBnGTGY0WZQSZIa7nRc
Which i expect to be a sub-domain of projects with a projectId
This is my routes setup
<Router history={new HashHistory}>
<Route path="/" component={Main}>
<Route path="profile" component={Profile} onEnter={requireAuth} />
<Route path="projects" component={Projects} >
<Route path="/projects/:projectId" component={ProjectsDetails} />
</Route >
<Route path="login" component={Login} />
<Route path="logout" component={Logout} />
<Route path="register" component={Register} />
<Route path="*" component={Register}/>
</Route>
</Router>
I also Link to the sub-route like this
<Link to={`/projects/${this.props.item.key}`}>
<h3 className="project-list-h3">{this.state.text} </h3>
</Link>
Its simply reverting to the * which is the registration page.
Is there something i need to add to the {ProjectsDetails} page? It dosnt even call it so i believe the problem is somewhere else.
Thanks
In the example you have provided above your route would be /projects/projects/:id. If you wish to a route like path="/projects/:projectId" you would not nest it inside the project route. I have included a link to the offical doc that gives an overview of this concept. Official docs routes.
If you have a look at the example it shows a similar nested route to yours, note that you combine the path of the parent and child to get the path of the child route.
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
/inbox/messages/:id App -> Inbox -> Message
I have been working along just fine with react router until I had to try and nest components and get my nav bar to show the path. For example I want to go from my matches page to a portfolio page, then I want the url to reflect this(....../#/matches/portfolio).
To me the docs seem to explain how to do this however I can only get the url to change and not the page content. No error is show just noting happens to the view.
Here is my router containing nested routes:
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="login" component={Login} />
<Route path="home" component={Home} />
<Route path="matches" component={Matches}>
<Route path="portfolio" component={Portfolio}>
<Route path="search" component={Search} />
</Route>
</Route>
<Route path="create" component={Create} />
<Route path="join" component={Join}/>
</Route>
</Router>
, document.getElementById('app'));
And if I am on the matches page and want to link to a portfolio I have a button with:
<Link to="matches/portfolio">To Portfolio</Link>
(Ideally I would like to have it have a portfolioId attached to the url but I am trying to keep it simple at the moment)
The repo can be found here:
https://github.com/muddybarefeet/pirateStocks and then main router is in server/client/src/app.jsx and all components in server/client/src/components.
To see the project run nodemon server.js and webpack
The following is how I got my routes to work. This is not what the docs say but it works!
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/login" component={Login} />
<Route path="/home" component={Home} />
<Route path="/join" component={Join}/>
<Route path="/matches" component={Matches} />
<Route path="/matches/portfolio" component={Portfolio} />
<Route path="/matches/portfolio/search" component={Search} />
<Route path="create" component={Create} />
</Route>
</Router>
, document.getElementById('app'));
And then route with the following:
<Link to="/matches/portfolio">To Portfolio</Link>