在React Router中一共有3种组件

• 路由组件：router components,

• 路由匹配组件：route matching components

• 导航组件：navigation components.

所有的组件，在应用时，都通过 react-router-dom进行import

import { BrowserRouter, Route, Link } from "react-router-dom";

路由组件

在每个React Router应用中，核心就是路由组件，对于web项目，react-router-dom提供了 <BrowserRouter> 和 <HashRouter>两种路由组件

每一个都为你创建一个专业的history对象，通常来说，如果你有一个服务器响应请求，你应该使用 <BrowserRouter>，但如果你使用静态文件服务，你应该使用 <HashRouter>

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  holder
);

路由匹配组件 Route Matching

有两种路由匹配组件： <Route> and <Switch>

import { Route, Switch } from "react-router-dom";

路由匹配组件通过比对一个路由 <Route>的path属性 和  当前浏览器location的pathname是否一致来进行工作，如果匹配成功则返回内容，否则render  null。

如果一个路由 <Route>没有设置path属性，那么它一定会被匹配到

// 当 location = { pathname: '/about' } 时
<Route path='/about' component={About}/> // 匹配成功，renders <About/>
<Route path='/contact' component={Contact}/> // 匹配失败，renders null
<Route component={Always}/> // renders <Always/> //没有设置path，一定会匹配到

你可以在任意的地方包含一个路由 <Route>，但是我们一般是把一些路由放在一起。

<Switch>组件用来对路由分组

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

<Switch>组件只会render第一个匹配到的路由，像上面我们说的，如果没有设置path，则一定会匹配，我们可以用来实现404的功能

只要能匹配到正常页面就render正常页面，都匹配不成功则render 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>

路由rendering属性 Route Rendering Props

渲染一个路由组件，我们有三种方式：component, render 和 children，我们主要介绍component, render ，因为这两个是最常用的

component：当你有一个现存的组件（无论是React.Component 还是无状态的函数式组件）要渲染时使用

render：render跟一个函数，当你必须传递一些变量给你的组件的时候使用，你不能使用component跟一个函数

const Home = () => <div>Home</div>;

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* 这些是正确用法 */}
      <Route exact path="/" component={Home} />
      <Route
        path="/about"
        render={props => <About {...props} extra={someVariable} />}
      />
      {/* 不要这么使用 */}
      <Route
        path="/contact"
        component={props => <Contact {...props} extra={someVariable} />}
      />
    </Switch>
  );
};

导航Navigation

React Router提供<link>组件去创建连接，当render一个<link>的时候，会在html里转换成<a>标签

<Link to="/">Home</Link>
// <a href='/'>Home</a>

 <NavLink>是一种特殊的<Link> ，当<NavLink>中的地址和浏览器地址匹配成功的时候，会添加一个style样式，如下

// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// <a href='/react' className='hurray'>React</a>

有时你可能想要强制跳转，这个时候你可以使用<Redirect>

<Redirect to="/login" />