React-15 Router

分类

• 前端路由
• 服务器路由

对比

路由类型	客户访问，路由	性能
前端路由	返回网页	页面刷新SEO友好
服务器路由	渲染UI视图	首屏加载慢，页面加载快

SEO（英文 Search Engine Optimization）字面理解很简单的，就是“搜索引擎优化”，最简单的理解就是“搜索自然排名”。

图片和解释来源

不适用React Router，如何在React中实现前端路由？

• 答：当访问不同页面时，前端代码通过匹配URL渲染不同的UI视图

• 代码：

  1. 监听路由变化，获取当前路由
  componentDidMount(){
    window.addEventListener('hashchange', ()=>{
      this.setState({
        route: window.location.hash.substr(1);
      });
    });
  }
  render(){
    return (
      <div>
  2. 匹配路由渲染组件
        <ul>
          <li><a herf="#/about">About</a></li>
          <li><a herf="#/">Home</a></li>
        </ul>
  3.创建路由导航链接
        {this.state.route === '/about' && <About/>}
        {this.state.route === '/' && <Home/>}
      </div>
    )
  }
  

React Router

• 安装

npm install --save react-router-dom

• 常用组件
  • 路由器：< BrowserRouter>
  • 路由匹配器：< Route>、< Redirect>
  • 导航组件：< Link>、< NavLink>、< Redirect>
• 代码
  • 非switch

class App extends React.Component{
  render(){
  1. 路由
    <BrowserRouter>
      <ul>
        <li>
  2. 路由导航
  <Link>最后会渲染出一个有真实href的<a>标签
          <Link to='/'> Home </Link>
        </li>
        <li>
          <Link to='/about'> About </Link>
        </li>
      </ul>
  3.路由匹配器：
  当path和当前URL匹配时，渲染对应的UI(User Interface)
      <Router exact path='/home' component={Home}/>
      <Router exact path='/about' component={Home}/>
    <BrowserRouter>
  }
}

• Switch

 render() {
        return (
            <Router>
                <div>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                </ul>
                </div>
                {/* Switch匹配到第一个路由就不会继续匹配了,
                如果不加Route 里不加 exact，那么凡是Link里面 to 的路径包含了/，
                那么就会被匹配到，于是Switch就不继续匹配下去
                */}
                <Switch>
                    <Route  exact path="/" component={Main}></Route>
                    <Route  path="/about" component={About}></Route>
                </Switch>
            </Router>
        );
    }

代码参考

Hooks API

• userHistory
  • 返回react router封装的history实例，用以导航
• userLocation
  • 返回react router封装的loaction实例
• userParams
  • 获取match.params
• userRouteMatch

  • 与一样的方式匹配当前URL，返回match