How to set a base url for react-router at the app level?

reactjs react-router-v4 create-react-app base-url
Fabrice picture Fabrice · Jan 7, 2018 · Viewed 26.9k times · Source

I have an app created with create-react-app that I want to install in a subdirectory on my website. The recommended way is to add process.env.PUBLIC_URL as the baseurl. ie:

<Route exact path={`${process.env.PUBLIC_URL}/signin`} component={SigninPage}/>

Now is there a way I can set it at the app level so I don't have to duplicate this piece of code on every Routes or Links or NavLinks?

Thanks!

Answer

margaretkru picture margaretkru · Jan 7, 2018

You can set it as basename on your Router, here are links to the react router docs: basename in BrowserRouter and basename in HashRouter. It would look something like this:

<Router basename={process.env.PUBLIC_URL}>
</Router>

Related questions

How to push to History in React Router v4?

In the current version of React Router (v3) I can accept a server response and use browserHistory.push to go to the appropriate response page. However, this isn't available in v4, and I'm not sure what the appropriate way to …

Read More
Programmatically navigate using react router V4

I have just replaced react-router from v3 to v4. But I am not sure how to programmatically navigate in the member function of a Component. i.e in handleClick() function I want to navigate to /path/some/where after processing …

Read More
React Router v4 - How to get current route?

I'd like to display a title in <AppBar /> that is somehow passed in from the current route. In React Router v4, how would <AppBar /> be able to get the current route passed into it's title prop? &…

Read More