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>
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!
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>
How to force a Link to be active on all subroutes?
Links looks like this
<Link to='/somepath' activeClassName='is-current'>Sometitle</Link>
And routes looks like this
<Provider store={Store}>
<Router history={history}>
<Route component={App}>
<Route path='/login' component={Login} />
<Route component={Workspace}>
<Route path='/somepath(/:id)' components={Component}/>
<Route path='/anotherpath(/:id)' components={AnotherComponent}/>
</Route>
</Route>
</Router>
</Provider>
Unfortunately now Link is active only when /somepath is current location.
But it become inactive on /somepath/356 (when some ID is selected). How to allow Link to be active if path NOT STRICTLY EQUAL to Link[to] property
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