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

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -