react-router

路由模式的设置

放在项目的最顶层
hash: HashRouter
history: BrowserRouter

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Route

路由，匹配不同的url规则，根据不同的规则展示不同的视图
path：当前路由要匹配的规则

1. 默认情况下，route是模糊匹配，url以当前开始时匹配
2. exact为精确匹配，当url === path或者 url === path/ 时则匹配成功
3. strict为严格匹配，只有当url === path时才算匹配成功，但严格匹配必须基于精确匹配的模式下
4. 多路径匹配，例如<Route path={["/","/index","/home"]} exact component={HomeView} />
5. component或者render，匹配成功之后要显示的视图

<Route path="/about" exact  component={AboutView} />
    <Route path="/about/details" exact component={AboutDetails} />
    <Route path="/join" exact component={JoinView} />

Link、NavLink

1. to 指的是链接的地址
2. 本系统内的链接用link或者navlink
3. 应用外的链接用a

navLink与link的不同：

1. navLink和link一样，但是会通过根据游览器的url和to属性的path进行匹配，如果匹配成功，则定义当前项为默认选中项
2. 当前 URL 与 NavLink 中的 to 匹配的时候，激活 activeStyle 中的样式
3. activeClassName: 选中项的 className 默认为 active
4. activeStyle: 选中项的 style
5. isActive:(match,location)=>{ 判断当前是否应该选中
   return true 选中，false 不选中
   match：根据 NavLink 匹配规则已经匹配成功则 match 是 match 对象，否则 为 null
   location 当前的url信息
   }

<NavLink 
      to="/" 
      exact
      activeClassName="root-active"
      activeStyle={{
        fontWeight: "bold"
      }}
      isActive={(match,{pathname})=>{
        //console.log(match,location);
        return pathname==="/"||pathname==="/home"||pathname==="/index";
      }}
    >首页</NavLink>

路由参数

当组件被路由调用时，会传递给组件一系列的路由信息，------路由参数

1. action：