React 16 - 生态：React Router

React Router

为什么要用路由？

• 单页应用需要进行页面切换
• 通过 URL 可以定位到页面
• 路由不只是页面切换，更有语义的组织资源

基本架构

使用

代码语言：javascript复制

<Router>
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/topics">Topics</Link></li>
    </ul>
    <div id="page-containe">
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </div>
</Router>

特性

• 声明式路由定义
• 动态路由

实现方式

• URL 路径
• hash 路由
  • 老版本浏览器
• 内存路由
  • 服务端渲染

基于路由配置进行资源组织

1. 实现业务逻辑的松耦合
2. 易于扩展，重构和维护
3. 路由层面实现 Lazy Load

API

<Link>: 普通的链接，不会触发浏览器刷新

代码语言：javascript复制

import { Link } from 'react-router-dom';

<Link to="/about">About</Link>

<NavLink>: 类似 <Link>，但是会添加当前选中状态

代码语言：javascript复制

<NavLink to="/about" activeClass="selected">About</NavLink>

<Prompt>: 满足条件时提示用户是否离开当前页面

代码语言：javascript复制

import { Prompt } from 'react-router';

<Prompt
  when={formIsHalfFilldOut}
  message="Are you sure you want to leave?" />

<Redirect>: 重定向当前页面，如登录判断

代码语言：javascript复制

import { Route, Redirect } from 'react-router';

<Route exact path="/" render={() => {
  loggedIn ? (
    <Redirect to="/dashboard" />
  ) : (
    <PublicHomePage />
  )
}} />

<Route>: 路由配置的核心标记，路径匹配时显示对应组件

代码语言：javascript复制

import { BrowserRouter as Router, Route } from 'react-router-dom';

<Router>
  <div>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/topics" component={Topics} />
  </div>
</Router>

<Switch>: 只显示第一个匹配的路由

代码语言：javascript复制

import { Switch, Route } from 'react-router';

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/:user" component={User} />
  <Route component={NoMatch} />
</Switch>

路由传参

通过 URL 传递参数

• 传递参数

代码语言：javascript复制

import { Link } from 'react-router-dom';

<Link to="/user/:id">User</Link>

• 获取参数

代码语言：javascript复制

this.props.match.params.id

• Path-to-RegExp (opens new window)
• 应用场景
  • 页面状态尽量通过 URL 参数定义

嵌套路由

• 每个 React 组件都可以是路由容器
• React Router 的声明式语法可以方便的定义嵌套路由

react router 浏览器 路由 配置

0 人点赞