基本组件 (Basic Components)
React Router 提供三种类型组件，分别是路由组件(router components)，路由匹配组件(route matching components)，以及导航组件(navigation components).
你使用以上的任何一个组件都必须要引入一个名为 react-router-dom 的文件
import { BrowserRouter, Route, Link } from 'react-router-dom'
2.1 路由 (Routers)
任何一个核心路由APP（REACT ROUTER APPLICATION）都必须为一个路由组件。对于web工程，react-router-dom 文件提供了 <BroswerRouter> 和 <HashRouter> 路由组件。 他们两个都会为你创建一个专门的 history 对象。一般来讲，你的服务器只是一个回应请求的服务器，那么更多使用的是<BroswerRouter>，但如果你的服务器是静态文件服务器，那么你可以使用<HashRouter>
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), holder)
2.2 路由匹配（Route Matching）
我们提供了两种路由匹配组件，它们分别是：<Route> 和 <Switch>.
import { Route, Switch } from 'react-router-dom'
路由匹配通过比较<Route>组件的PATH属性和本地路径的pathname 来完成工作。当一个 <Route> 匹配到对应路径，他会渲染(render) 对应路径的内容，然而当它没有匹配到对应路径是，会渲染null。 一个没有提供path属性的<Route> 将始终被渲染
// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>
你可以在任何你想要根据位置渲染的内容中去包含<Route> 组件。列出并排列多个可能的<Route>组件通常会很有用。 <Switch>组件用于组合一系列<Route>组件。
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
</Switch>
当然 <Switch> 对于组合<Route> 并不是必须的，也就是说我们并不一定需要组合<Route>，但是这是一个非常有用的组件。<Switch> 组件会遍历所有<Route>元素，并且只渲染最先与本地路径相匹配的<Route>元素。这对于多个route组件路径匹配同一个路径，或者当动画在两个组件中过度，或者识别到对于本地路径没有路由路径与之匹配的时候(这时你可以渲染一个 404 组件)会非常有帮助
<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>
2.3 路由渲染参数
你可以有三个参数来选择你该如何渲染给出的<Route>组件，分别是：component， render， 和 children。 你可以查看 <Route>documentation来了解以上三个参数的更多信息，但是在这里， 我们将主要讲 component 和 render 方法，因为他们是两个最主要的方法，也是最常用的。
component 作用于你想要渲染的已经存在的组件(可以是 react.component ，也可以是无状态组件(pure function)）。render 方法提供一个内部函数，当你想要对将被渲染的组件
传入内部变量的时候，你需要使用这个方法。 你不应该对component方法传入内部变量，因为component会有两个多余的方法 unmounts / remounts。
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>
)
}
2.4 导航
REACT ROUTER 提供<Link>组件，它在你的app内部创建一个链接(link)，无论你在哪里渲染了<Linke>，它都会被渲染成html的锚点元素<a>
<Link to='/'>Home</Link>
// <a href='/'>Home</a>
<NavLink> 是一个特殊类型的<Link>，当该元素被点击的时候会激活"active"样式(提供了activeClassName属性)。
// location = { pathname: '/react' }
<NavLink to='/react' activeClassName='hurray'>React</NavLink>
// <a href='/react' className='hurray'>React</a>
在任何时候，如果你想要强制导航，那么你可以渲染一个<Redirect>。当一个<Redirect>元素被渲染时，它会根据该元素下的"to"属性，导航到指定路径。
Redirect to='/login'/>
