react-router-dom

• 安装
  • cnpm i react-router-dom --save
• HashRouter和BrowserRouter
  • hashRouter
    • 带#号的

  import React from 'react';
  import ReactDOM from 'react-dom';

  import registerServiceWorker from './registerServiceWorker';
  import { BrowserRouter, HashRouter, Router } from 'react-router-dom';

  function home(){
    return <h2>Home Page</h2>
  }

  ReactDOM.render(
    // hashRouter
    <HashRouter>
      <Route path="/" component={home}></Route>
    </HashRouter>
    
    //browserRouter
    <BrowserRouter basename="/calendar"> 
      <Route path="/" component={home}></Route>
    </BrowserRouter>
    //basename如果文件放在服务器的二级目录下则可以使用，当主页前面有一级目录calendar时，同样会显示主页的内容，通常配合Link使用
    ,document.getElementById('root')
  );
  registerServiceWorker();
    

• Route
  • Route是路由的一个原材料，它是控制路径对应显示的组件。通常使用exact、path以及component属性
  • <Route exact path='/' component={home}></Route>,exact控制匹配到/路径时不会再继续向下匹配，path标识路由的路径，component表示路径对应显示的组件
• Line和NavLink
  • 二者都可以控制路由跳转，不同点是NavLink的api更多
  • Line
    • 主要api是to，to可以接收string或者object，来控制url

  <link to='/courses'>
  <link to={{
    pathname:'/courses',
    search:'?sort=name',
    hash:'#the-hash',
    state:{ fromDashboard:true }
  }}

• NavLink
  • 可以为当前选中的路由设置类名、样式以及回调函数等

  ReactDOM.render(
    <BrowserRouter basename="/calendar">
      <div>
        <div>
          <ul>
            <li>
              <NavLink exact activeClassName='selected' to='/'>home</NavLink>
            </li>
            <li>
              <NavLink activeClassName='selected' to='/second/1234'>second</NavLink>
            </li>
            <li>
              <NavLink activeClassName='selected' to='/third'>third</NavLink>
            </li>
          </ul>
        </div>
        <Route exact path='/' component={Home}></Route>
        <Route path='/second/:id' component={Second}></Route>
        <Route path='/third' component={Third}></Route>
      </div>
    </BrowserRouter>,document.getElementById('root')
  );
  /* 
    >exact用于严格匹配，匹配到/则不会继续向下匹配
    >to控制跳转的路径
    >activeClassName是选中状态的类名，可以为其添加样式
    >在/second后添加1234来路由中传递消息
  */ 

• match
  • match是在使用router之后被放入props中的一个属性，在class创建的组件中通过this.props.match来获取match中的信息
  • this.props.match中存在params（对象中具有id属性），path，url等字段
• Switch
  • Switch包裹Route，里面不能放其他元素，用来只显示一个路由