javascript - react router relative link does not link properly -
so i'm using npm package react-router-relative (https://www.npmjs.com/package/react-router-relative) doesn't seem switching url properly.
here's links looks like:
<link to='items' classname="btn btn-default submission-button">items</link> <link to='maps' classname="btn btn-default submission-button">maps</link>
here's routing:
<route path="submissions" component={submissionpage}> <route path="items" component={itemsubmissions}></route> <route path="maps" component={mapsubmissions}></route> </route>
what happens first time click on link it'll link i.e.
http://localhost:3000/#/account/submissions/items
but when hit again it'll go to:
http://localhost:3000/#/account/submissions/items/items
at point end part switch rather append, throws error.
however, i'm trying make part right after 'submission' switch, i.e. account/submissions/items
account/submissions/maps
.
what doing wrong?
i've tried non-relative link variation of this, i.e. {this.props.location.pathname + '/items'}
same thing.
i have searched problem , found useful package react-router-relative-links
to install run in terminal :
npm install react-router-relative-links react-router-apply-middleware
then in routes file apply middleware so:
import { router, route, browserhistory } 'react-router'; import applymiddlewarerouter 'react-router-apply-middleware' import { userelativelinks } 'react-router-relative-links' <router history={browserhistory} render={applymiddlewarerouter(userelativelinks())}> <route path="submissions" component={submissionpage}> <route path="items" component={itemsubmissions}></route> <route path="maps" component={mapsubmissions}></route> </route> </router>
then time you need add navigate link can add so: assume current path localhost:8080/account/submissions
<relativelink to='./items'>test</relativelink> # localhost:8080/account/submissions/items <relativelink to='./maps'>test</relativelink> # localhost:8080/account/submissions/maps
, it's better use link component provided react-router
Comments
Post a Comment