H5W3
当前位置:H5W3 > 问答 > 正文

React Router 4 Nested Routes not rendering

I’m trying to do nested routing in one of my components.

Here’s the parent component:

const App = () => (
<BrowserRouter>
<Provider store={store}>
<Switch>
<Route exact path="/" component={Landing} />
<Route path="/contribute" component={Contribute} />
</Switch>
</Provider>
</BrowserRouter>
);

And here’s the child component:

const Landing = () => (
<div>
<SearchBar />
<section className="results-sctn">
<Route exact path="/" component={ArtistList} />
<Route path="/test" component={Test} />
</section>
</div>
);

ArtistList renders fine on the / route, but /test renders a totally blank page. Any idea why this might be?

Answer

This behaviour happens because have an exact attribute mentioned on the parent route

<Route exact path="/" component={Landing} />

So what happens is that react-router sees a path /test to match and then tries to match it starting from the top level. and it sees two routes one is exactly / and other is /contribute. None of them match the required path and hence you see a blank page

You need to write

<Route path="/" component={Landing} />

So when you do this, it will see / which matches /test partially and then will try to find a matched route in the landing component which it will find.

Also change the order of the parent Route, since Switch renders the first match and / is a partial match for /test so /contribute wont work

Your final code would look like

const App = () => (
  <BrowserRouter>
    <Provider store={store}>
      <Switch>
        <Route path="/contribute" component={Contribute} />
        <Route path="/" component={Landing} />
      </Switch>
    </Provider>
  </BrowserRouter>
);

本文地址:H5W3 » React Router 4 Nested Routes not rendering

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址