React-router: A <Router> may have only one child element

[EasonWang01]

How to change this to fit it.

  <BrowserRouter>
      <Route path="/" component={App} />
      <Route path="/01" component={Record} />
  </BrowserRouter>

[pshrmn]

<BrowserRouter>
  <div>
      <Route path="/" component={App} />
      <Route path="/01" component={Record} />
  </div>
</BrowserRouter>

The <div> could also be a <Switch> if you only want one <Route> to render.

[EasonWang01]

No,it will have App inside Record.

[pshrmn]

I'm not exactly sure what you mean.

<Route path="/"> matches all paths. You will need to use the exact prop if you want that route to only match when location.pathname === '/'.

[EasonWang01]

OK,but what's the different of Switch and Div

[pshrmn]

A <Switch> only renders the first child <Route> that matches the current location. The <div> would just be a placeholder to deal with the fact that (currently) React components can only return a single element.

[EasonWang01]

But who will write many for same route path?

[EasonWang01]

Ok,more clear after look at this https://reacttraining.com/react-router/web/api/Switch