react-router中有三类组件：
- 路由组件（router components）
- 路由匹配组件（route matching components）
- 导航组件（navigation components.）
上面三类组件都需要从react-router-dom中import导入
Routers
每个react-router应用的核心应该是router组件
对于web项目，react-router-dom提供来两种路由方式： <BrowserRouter> 和<HashRouter>
这两种路由都为你提供了特有的history对象
一般来说，如果你有响应请求的服务器，就应该使用<BrowserRouter>
如果你使用静态文件服务，就应该使用<HashRouter>
{* 表示使用BrowserRouter模式来使用Router *}
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
<Router>
<App />
</Router>
holder
);
Route matching
有两种路由匹配组件：<Route>和<Switch>
Route
通过比较<Route>组件的path属性与当前location的pathname来进行路由匹配，如果匹配成功，那就会在<Route>组件这个地方渲染component属性的组件内容；如果没有匹配成功，会渲染null。
如果<Route>组件没有path属性，将始终匹配，也就是始终会渲染指定的内容。
比如： <Route component={Always}/> // renders <Always/>
(`location的pathname` 是指url地址域名后面的所有字符，
比如https://www.jianshu.com/writer, location.pathname == '/writer')
<Route />组件不能嵌套
Switch
我们不一定要用Switch来对<Route/>进行分组，但是Switch很有用。
<Switch>将迭代其所有子<Route>元素，并仅渲染与当前路由匹配的第一个子元素
当多个<Route>的路径匹配相同的路径名，动画路由之间的转换，以及识别何时没有路径与当前路由匹配时（这样您可以渲染“404”组件），这会有所帮助。
import { Route, Switch } from "react-router-dom";
<Route path='/about' component={About}/> {* renders <About/> *}
<Route path='/contact' component={Contact}/> {* renders null*}
<Route component={Always}/> {* renders <Always/>*}
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
{/* when none of the above match, <NoMatch> will be rendered */}
<Route component={NoMatch} />
</Switch>
Route Rendering props
使用<Route />组件渲染其他组件，你可以有三个属性可以设置渲染的组件：component, render, children
可阅读API->Route查阅详细信息
这里只关注component和render,因为它们会被经常使用。
component属性：用来渲染已经存在的组件(不管是从React.Component继承的组件还是无状态的函数组件)
render属性： 是一个内联函数，仅仅在你想要给你想要渲染的组件传递局部变量的时候使用
const Home = () => <div>Home</div>;
const App = () => {
const someVariable = true;
return (
<Switch>
{/* these are good */}
<Route exact path="/" component={Home} />
<Route path="/about" render={props => <About {...props} extra={someVariable} />} />
{/* do not do this , 下面的写法是错误的*/}
<Route
path="/contact"
component={props => <Contact {...props} extra={someVariable} />}
/>
</Switch>
);
};
Navigation
其实就是通过<Link></Link>标签对包裹元素，进行导航。
该标签会被渲染为<a>标签
<NavLink>标签是一种特殊的<Link>标签，当路由匹配时，它会加上‘active’类
如果你想强制导航，使用<Redirect />
<Link to="/">Home</Link>
// <a href='/'>Home</a>
<NavLink to="/react" activeClassName="hurray">
React
</NavLink>
// <a href='/react' className='hurray'>React</a>
<Redirect to="/login" />
