CODEWITHSUNDEEP
react-routerreact-router-v4
OFFLlNE
OFFLlNE

Reputation: 807

How to have react route path one/two/three?

I would like to have something like this

        <Route
          path="/one/two/three"
          render={() => (
            <Component/>
          )}
          exact
        />

But it does not seem to work locally when I wrap it all into a Router. I only see the contents of the Component when it is just /one, but I would like to have /one/two/three as the path (being my root - user lands on that path).

Upvotes: 1

Views: 542

Answers (2)

OFFLlNE
OFFLlNE

Reputation: 807

Few reasons why this did not work for me. I was missing output: { publicPath: '/' }, in my webpack config.

And weirder thing was that I was using PureComponent instead of Component which totally broke the rending when redirecting to the next step with similar path(x/y/z) or using Link.

Upvotes: 0

ravibagul91
ravibagul91

Reputation: 20765

In react-router-v4 you can have below routes only,

<Route path="/one" render={() => (<Component/>)} exact /> //Direct route without any params

or

<Route path="/one/:two" render={() => (<Component/>)} exact /> //Route with params, here `:two` is the parameter to route

If you want to use routes like in your example, then this can be achieve using BrowseRouter basename attribute,

<BrowserRouter basename="/one/two">
   <Route path="/three" render={() => (<Component/>)} exact />
</BrowserRouter>

And you Link should be like,

<Link to="/three"/> // renders <a href="/one/two/three">

Upvotes: 1

Related Questions