Tricky nested match.url in react router v4

Question

I want a component which renders on every route, and has child components (e.g. a header).

By leaving out exact in the route I can achieve that.

render(
    <Router>
      <Route path="/" component={App}/>
    </Router>,
    document.getElementById('app')
);

Inside the component, I have nested routes:

const App = ({match}) => (
    <Switch>
      <Route path={`${match.url}login`} component={LoginForm}/>
      <Route path={`${match.url}panel`} component={ControlPanel}/>
    </Switch>
);

It picks one out of two components to render, based on the path.

As shown in the documentation we need to use the match url. This was very confusing to me, since the match.url is /, and blindly following the examples I wrote e.g. '{${match.url}/login}', which results in //login `

My question: if I do not match a parameter, why can't I use a full path in the child?

The following does not work when used inside App:

<Route path="/login" component={LoginForm}/>

I use ver3 but the way I setup my router should apply to your case. If you want to render a component on every route you don't need to provide a path. Do something like this: <Route component={NavPanel}> — Gilbert Nwaiwu
– Gilbert Nwaiwu, Commented May 3, 2017 at 15:59
Inside of NavPanel you refer to nested components as props.children. This way all your router logic can be placed in one place. I can give a more complete answer if you so require. — Gilbert Nwaiwu
– Gilbert Nwaiwu, Commented May 3, 2017 at 16:02
Thanks! That solves my problem, but does not answer my question :) — Ynv
– Ynv, Commented May 4, 2017 at 7:04
I dont quite understand what the question is. Are you saying that using path={${match.url}login} is equivalent to path="/login" but the latter does not work? — Gilbert Nwaiwu
– Gilbert Nwaiwu, Commented May 4, 2017 at 8:13

Stanislav Mayorov · Accepted Answer · 2018-04-20 10:16:56Z

1

I am not sure that I understand you correctly. I think you should use path instead of url.

const App = ({match}) => (
    <Switch>
      <Route path={`${match.path}/login`} component={LoginForm}/>
      <Route path={`${match.path}/panel`} component={ControlPanel}/>
    </Switch>
);

answered Apr 20, 2018 at 10:16

Stanislav Mayorov

4,4945 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tricky nested match.url in react router v4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related