Can I create routes aliases using react router?
I am working on a new project that will be built using react and react router. I am planning on restructuring my routes so that it is cleaner than before. However, I don't want to rip up old bookmarks that users might have.
For example, my new routes might look like this:
<Route path="/" component={Layout}>
<Route component={ItemList} path="items/:category" />
<Route component={ItemDetail} path="item/:designCode" />
</Route>
Some example routes could be, say - / items / electronics, / items / gifts.
However, I have a legacy codebase that has routes like / electronic items, / buy-gifts, etc.
Is there a way to create route aliases so that I can map these legacy URLs to the newly structured ones?
I've come across something similar in Vue 2.0 , but I'm especially interested in a reactive solution. Any suggestions (other than - use a redirect or use Vue: D itself)?
source to share
Assuming you are using React-Router v4
, you can use the component Redirect
like this:
<Route path="newListUrl" component={ItemList}/>
<Route path='/oldListUrl' render={() => (
<Redirect to="newUrl" />
)}/>
If you are using React-Router v3
:
<Route path="newListUrl" component={ItemList}/>
<Redirect from='oldListUrl'to="newListUrl" />
source to share