Reputation: 408
const routes = [
{ component: Root,
routes: [
{ path: '/',
exact: true,
component: Home
},
{ path: '/child/:id',
component: Child,
routes: [
{ path: '/child/:id/grand-child',
component: GrandChild
}
]
}
]
}
]
routes.config.js
export routes object using in renderRoutes
method which is exported by react-router-config
when I start the app and access the url localhost:3000
the Home component will be rendered .
If access localhost:3000/child
the request is 404
.
If access localhost:3000/#/child
but it render Home
component instead of Child
component
In the development mode I know can add devServer:{historyApiFallback:true}, but should I do in the production mode ?
If using HashRouter
it works well.
So how can I using the BrowserRouter?
Upvotes: 2
Views: 1591
Reputation: 2309
Try this:
Step 1: Wrap your <App /> inside <BrowserRouter />
Step 2: <Router path="/child" component={Child} />
Step 3: Point this router using <Link to="/CHILD>Child</Link>"
Upvotes: 2