CODEWITHSUNDEEP
reactjs
JaSHin
JaSHin

Reputation: 277

ReactJS - two way router

I wanted to ask if something like two way router. I found the router-react, but I do not like setting of Link directly to path in string format. Like

<Link to="/about">About</Link>

Exist router to refer to a component instead of the path? Like

<Link to={AboutComponent}>About</Link>

If you would like to change the URL, so I had to change paths everywhere. Thus, I will change it in one place.

Upvotes: 0

Views: 40

Answers (2)

dannyjolie
dannyjolie

Reputation: 11339

Exist router to refer to a component instead of the path?

No.

If you would like to change the URL, so I had to change paths everywhere. Thus, I will change it in one place.

Then store all your paths as a constant in one place, and import them where you need them:

// paths.js
export const ABOUT = '/about';
export const SOMETHING_ELSE = '/somethingelse';

So in your app:

import { ABOUT, SOMETHING_ELSE } from './paths'
...
<Route path="{ABOUT}" component={AboutComponent}/>

And just do the same wherever you use <Link to={ABOUT}>About</Link>

If you at some later point decide to change the path, just change it in paths.js.

Upvotes: 2

Ron
Ron

Reputation: 6735

IMO, we cannot use component itself directly in Link component, simply because in some case one component may be shared in different routes. Like the following: 

<Route path='/recent-movies' component= {MovieList} />
<Route path='/hot-movies' component= {MovieList} />

In the above example, the MoveList component will display the movies based on the path passed in. (I knew it is not a good example, just want to show it is a possible case)

In angular ui-router, it introduced route name, so every time it will not be affected when path is changed. But in react-router, it is simpler, I personally don't mind to much.

Upvotes: 0

Related Questions