Is it possible to define default route in react-router?

Question

Suppose my app's base URL is example.com/app

Is it possible to set up basic routing in react-router instead of writing all routes as

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

I can specify them as

a
b
c

I tried the following example found in the documentation but it doesn't work (the page won't display anything). 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>
)

Answer 1

If you want to use , it gives you access to the history object, allowing you to change the page via history.push('/my-path') code> directly Method from js. You will face the problem that BrowserRouter has no history property available, and Router has no basename available.

The solution is as follows:

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>;
}

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

Answer 2

Using the latest react router (v4) you can do this easily

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