Using the below Route configuration -
<Router history={hashHistory}>
<Route name="Home" path="/" component={BaseLayout}>
<Route name="Gateways" path="/gateways" component={DashboardLayout}>
<Route name="Login" path="/login" component={Login}/>
<Route name=":id" path="/gateways/:id">
<IndexRoute name="Dashboard" component={ViewGateWay}/>
<Route name="Access Points" path="/accesspoints" component={AccessPoints}>
<Route name=":id" path="/:id" component={ViewAccessPoint}/>
</Route>
<Route name="Devices" path="/devices" component={Devices}>
<Route name=":id" path="/:id" component={ViewDevice}/>
</Route>
</Route>
<IndexRoute component={Gateways} />
</Route>
<IndexRedirect to="Login" />
</Route>
</Router>
Using name in the Route for breadcrumbs. Have a side menu which have links to /gateways/:id, /gateways/:id/devices, /gateways/:id/accesspoints, further the last two have links to individual devices and access points using Link as /gateways/:id/devices/:id and /gateways/:id/accesspoints/:id. When I am giving the link in the side menu as
<Link to="/gateways/${this.props.params.id}/accesspoints">Access Points</Link>
OR
<Link to="/accesspoints">Access Points</Link>
I am not getting the correct page. Same goes with the devices link. I am trying to achieve the below API's along with breadcrumb.
home/gateways/GW_ID1/dashboard
home/gateways/GW_ID1/accesspoints
home/gateways/GW_ID1/accesspoints/GW_AP1
home/gateways/GW_ID1/devices
home/gateways/GW_ID1/devices/GW_DV1
What is the correct way to Link ? Not using any handler.
After a bit of brainstorming, came up with a solution what I wanted to achieve
<Route name=":gid" path="/gateways/:gid">
<Route name="Dashboard" path="/gateways/:gid/dashboard" component={ViewGateWay}/>
<Route name="Access Points" path="/gateways/:gid/accesspoints" component={AccessPoints}>
<Route name=":apid" path="/gateways/:gid/accesspoints/:apid" component={ViewAccessPoint}/>
</Route>
<Route name="Devices" path="/gateways/:gid/devices" component={Devices}>
<Route name=":did" path="/gateways/:gid/devices/:did" component={ViewDevice}/>
</Route>
</Route>
Related
I want to redirect from any * route to my home page, because I want to change url to '/'.
I followed this link:
React-Router: No Not Found Route?
But when I want to change any route path It moves me independently to the url '/'
<Route exact path="/" component={MMPStudio} />
<Route exact path="/galeria" component={Gallery} />
<Route exact path="/kontakt" component={Contact} />
<Route exact path="/fotobudka" component={Fotobudka} />
<Route exact path="/jubiler" component={Jubiler} />{" "}
<Route exact path="/fotobudka/kontakt" component={FotobudkaContact} />
<Route exact path="/jubiler/galeria" component={JubilerGallery} />
<Switch>
<Route exact path="/" component={MMPStudio} />
<Redirect from="*" to='/' />
</Switch>
I think your switch should wrap the whole thing:
<Switch>
<Route exact path="/" component={MMPStudio} />
<Route exact path="/galeria" component={Gallery} />
<Route exact path="/kontakt" component={Contact} />
<Route exact path="/fotobudka" component={Fotobudka} />
<Route exact path="/jubiler" component={Jubiler} />
<Route exact path="/fotobudka/kontakt" component={FotobudkaContact} />
<Route exact path="/jubiler/galeria" component={JubilerGallery} />
<Redirect from="*" to='/' />
</Switch>
I am new to react-router.
In current app we are using below react-router
module.exports = (
<Router history={HashHistory}>
<Route path="/" component={Frame}>
<IndexRoute component={Page1} />
<Route path="all" component={Page2} />
<Route path="admin" component={Page3} />
<Route path="proxy" component={Page4} />
</Route>
</Router>
);
due to some changes now I want to make different page as home page but also want to make minimum changes to unimpact the current functionalities. Using the below router config but not working
<Router history={HashHistory}>
<Route path="/" component={Home}>
<Route path="achieve" component={Frame}>
<Route path ="achieve" component={Page1}>
<Route path="all" component={Page2} />
<Route path="admin" component={Page3} />
<Route path="proxy" component={Page4} />
</Route>
</Route>
</Route>
</Router>
Any pointer to resolve the issues and to explore this?
Thanks in advance.
If you wants to make each page as a home page then don't use nested route, make the separate route for each.
Try this:
<Router history={HashHistory}>
<Route path="/" component={Home}/>
<Route path="/achieve" component={Frame}/>
<Route path ="/achieve" component={Page1}/>
<Route path="/all" component={Page2} />
<Route path="/admin" component={Page3} />
<Route path="/proxy" component={Page4} />
</Router>
Use nesting in that route where you want to use some component inside that. Lets say you want to use some component inside admin page then :
<Router history={HashHistory}>
<Route path="/" component={Home}/>
<Route path="/achieve" component={Frame}/>
<Route path ="/achieve" component={Page1}/>
<Route path="/all" component={Page2} />
<Route path="/admin" component={Page3} >
<IndexRoute component={comp1}/>
<Route path="/xyz" component={comp2}/>
</Route>
<Route path="/proxy" component={Page4} />
</Router>
Follow these links for better explanation:
https://css-tricks.com/learning-react-router/
https://medium.com/#dabit3/beginner-s-guide-to-react-router-53094349669#.sjzpetwbb
Please comment if need any help.
I have tried to define child routs with react router ( below code ) but child route is not working and also it doesn't returning any error message.
<Router>
<Route path="/" component={Main} >
<IndexRoute component={Dashboard} />
<Route path="create" component={UserList} />
<Route path="user/create" component={CreateUser} />
<Route path="createGroup" component={CreateGroup} />
<Route path="groups" component={GroupList} />
<Route path="premission" component={PremissionList}>
<Route path="create" component={CreatePremission} />
</Route>
</Route>
</Router>
I need to route premission/create to the create premission component.
To do multiple types of deep level/ nested routing you need to follow following approach:
<Router>
<Route path="/" component={Main} >
<IndexRoute component={Dashboard} />
<Route path="create" component={UserList} />
<Route path="user/create" component={CreateUser} />
<Route path="createGroup" component={CreateGroup} />
<Route path="groups" component={GroupList} />
</Route>
<Route path="/premission" component={PremissionList}>
<Route path="create" component={CreatePremission} />
</Route>
</Router>
I can´t get multiple "master" views to work with routes when using react-router. Here is my routes config:
const routes = (
<Route path="/" component={AppView}>
<Route path="/log-in" component={LogInView}/>
<IndexRoute component={MainView}>
<IndexRoute component={HomeView} />
<Route path="company" component={CompanyView} />
<Route path="clients" component={ClientsView} />
<Route path="terms-of-service" component={TermsOfServiceView} />
<Route path="privacy-policy" component={PrivacyPolicyView} />
<Route path="contact" component={ContactView} />
</IndexRoute>
</Route>
);
Any thoughts how I can get this to work?
Thanks to knowbody the solution was quite simple, simply remove the path attribute from the top level Route element and change IndexRoute to a normal Route for the MainView:
const routes = (
<Route component={AppView}>
<Route path="/log-in" component={LogInView} />
<Route path="/" component={MainView}>
<IndexRoute component={HomeView} />
<Route path="company" component={CompanyView} />
<Route path="clients" component={ClientsView} />
<Route path="terms-of-service" component={TermsOfServiceView} />
<Route path="privacy-policy" component={PrivacyPolicyView} />
<Route path="contact" component={ContactView} />
</Route>
</Route>
);
I'm using react-router v. 1.0.0-rc3 and I have a route configuration as follows:
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="track/:id" component={Track} />
<Route path="track/new/" component={NewTrack} />
</Route>
When I navigate to track/new/, it is matching the track/:id path and the component Track gets used. This didn't happen before. Do I need to change my paths or is there any way to keep this path format?
just swap them around:
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="track/new" component={NewTrack} />
<Route path="track/:id" component={Track} />
</Route>