CODEWITHSUNDEEP
reactjsreact-router-v4server-side-rendering
mqliutie
mqliutie

Reputation: 408

How can I using BrowserRouter instead of HashRouter in react-router v4

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

Answers (1)

Anil Kumar
Anil Kumar

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

Related Questions