CODEWITHSUNDEEP
reactjsreact-router-v4
Ynv
Ynv

Reputation: 1964

Tricky nested match.url in react router v4

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

Upvotes: 2

Views: 2332

Answers (1)

Stanislav Mayorov
Stanislav Mayorov

Reputation: 4452

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

Upvotes: 1

Related Questions