Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A <Router> may have only one child element #4928

Closed
EasonWang01 opened this issue Apr 7, 2017 · 7 comments

Comments

@EasonWang01
Copy link

commented Apr 7, 2017

How to change this to fit it.

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

This comment has been minimized.

Copy link
Collaborator

commented Apr 7, 2017

<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.

@pshrmn pshrmn closed this Apr 7, 2017

@EasonWang01

This comment has been minimized.

Copy link
Author

commented Apr 7, 2017

No,it will have App inside Record.

@pshrmn

This comment has been minimized.

Copy link
Collaborator

commented Apr 7, 2017

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

This comment has been minimized.

Copy link
Author

commented Apr 7, 2017

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

@pshrmn

This comment has been minimized.

Copy link
Collaborator

commented Apr 7, 2017

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

This comment has been minimized.

Copy link
Author

commented Apr 7, 2017

But who will write many for same route path?

@EasonWang01

This comment has been minimized.

Copy link
Author

commented Apr 7, 2017

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

@ReactTraining ReactTraining locked and limited conversation to collaborators Feb 15, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
2 participants
You can’t perform that action at this time.