【Route】
The Route component is perhaps the most important component in React Router to understand and learn to use well. Its most basic responsibility is to render some UI when a location matches the route’s path.
1、Route的基本用法
import { BrowserRouter as Router, Route } from 'react-router-dom' <Router> <div> <Route exact path="/" component={Home}/> <Route path="/news" component={NewsFeed}/> </div> </Router>
If the location of the app is / then the UI hierarchy will be something like:
<div> <Home/> <!-- react-empty: 2 --> </div>
And if the location of the app is /news then the UI hierarchy will be:
<div> <!-- react-empty: 1 --> <NewsFeed/> </div>
The “react-empty” comments are just implementation details of React’s null rendering. But for our purposes, it is instructive. A Route is always technically “rendered” even though its rendering null. As soon as the app location matches the route’s path, your component will be rendered.
2、Route render methods
Each is useful in different circumstances. You should use only one of these props on a given <Route>. See their explanations below to understand why you have 3 options. Most of the time you’ll use component.
3、Route props
4、exact: bool
When true, will only match if the path matches the location.pathname exactly.
