Can I set a base route in react-router

Question

Assuming my app's base url is example.com/app

Is it possible to set a base route in react-router so instead of writing all routes as

/app/a
/app/b
/app/c

I can just specify them as

a
b
c

I tried the below example I found in the docs but it wouldn't work (page would display nothing). Maybe it's because I'm using react-router@3.0.0-alpha.1, or I'm doing something wrong.

import { useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
  basename: '/app'
})

const Root = ({store}) => (
    <Provider store={store}>
        <Router history={history}>
            <Route path='/' component={App}>
                ...
            </Route>
        </Router>
    </Provider>
)

@Learner nope. I gave up and started typing routes in full, and actually found it to be cleaner. — galki, Feb 03 '17 at 03:23
Really? There is no easy solution for this? I have searched and tried some ideas without any luck (but then I am a newbie). — Ashley Aitken, Apr 21 '17 at 00:28

score 144 · Accepted Answer · edited Nov 09 '20 at 20:35

144

With the newest react router (v4) you can easily do this

<BrowserRouter basename="/calendar">
  <Link to="/today"/> // renders <a href="/calendar/today">
</BrowserRouter>

edited Nov 09 '20 at 20:35

flob

3,592
2
34
53

answered Apr 21 '17 at 02:45

galki

6,946
6
44
58

4

Is there anyway to do this with dynamic path fields? Like `/calendar/:year/:month/:day/event` where it could be, for example, `/calendar/11/4/21/event` – Jeremy Dec 15 '17 at 21:21
4

why not put the `:year/:month/:day/event` part in the Link to=? – galki Mar 02 '18 at 02:22
5

Important to point out here that the docs seem to be wrong about the correct usage of the tag. A self-closing tag as seen in the docs will have no effect. You need to wrap your tag around all your s and other routing tags. The example should read: ... – Jamie McLaughlin Mar 17 '20 at 15:27
this does not seem to work anymore unfortunately – Matteo Jun 27 '21 at 09:08
@Madeo can you provide a new answer? I’ll redirect – galki Jun 27 '21 at 13:45
`BrowserRouter` somehow did not work for me, I had to use the `createBrowserHistory`'s API and remove ` – Matteo Jun 28 '21 at 00:08
@Madeo I use the same approach as you do, but I find that `Route` component with trimmed path value will navigate to 404 route – liuliang Jul 29 '21 at 07:14

score 18 · Answer 2 · answered Oct 22 '19 at 14:10

If you want to use <Router />, that give you access to history object, allowing you to change page through history.push('/my-path') method directly from js. You will face the issue that BrowserRouter does not have history prop available, and Router does not have basename available.

The solution is the following:

const App: React.FC = () => {
  // do not put a slash at the end of the basename value.
  const history = createBrowserHistory({ basename: '/your-base-name' });

  return <Router history={history}>
           ...
         </Router>;
}

The base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash

https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

Can I set a base route in react-router

2 Answers2

Linked