{/ Redirect with matched parameters /}

<a name="y9zeB"></a>
# Link
在应用程序周围提供声明式的,可访问的导航。
<a name="uEvBG"></a>
##### to: string
链接位置的字符串表示，通过连接位置的路径名，搜索和 hash 属性创建。
```javascript
import { Link } from 'react-router-dom'
<Link to="/about">About</Link>
<Link to='/courses?sort=name' replace />

to: object

一个可以具有以下任何属性的对象：

• pathname: 表示要链接到的路径的字符串。
• search: 表示查询参数的字符串形式。
• hash: 放入网址的 hash，例如#a-hash。
• state: 状态持续到location。

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

  replace: bool

  如果为true，则单击链接将替换历史堆栈中的当前入口，而不是添加新入口。

  innerRef: function

  允许访问ref组件的底层。 ``jsx const refCallback = node => { console.log(node); // <a href="/m/profile">用户</a> //node` refers to the mounted DOM element or null when unmounted }

用户

<a name="iqG8N"></a>
##### others
还可以传递您想要放在<a>上的属性，例如标题，ID，className等。
<a name="bI6vP"></a>
##### Link标签和a标签有什么区别？
从最终渲染的DOM来看，这两者都是链接，都是a标签，区别是： Link标签是react-router里实现路由跳转的链接，一般配合Route使用，react-router接下了其默认的链接跳转行为，区别于传统的页面跳转，Link标签的"跳转"行为只会触发相匹配的Route对应的页面内容更新，而不会刷新整个页面<br />Link标签做的三件事情：
- 1.有onclick那就执行onclick
- 2.click的时候阻止a标签默认事件
- 3.根据跳转href(即使是to)，用history(web前端路由两种方式之一，history&hash)跳转，此时只是链接变了，并没有刷新页面
而标签就是普通的超链接了，用于从当前页面跳转到href指向的里一个页面(非锚点情况)
<a name="NKi6y"></a>
# 嵌套路由
![artew.gif](https://cdn.nlark.com/yuque/0/2021/gif/139415/1619677375263-be79f463-c8de-47db-879b-538f881cae78.gif#clientId=ub86ddfb5-b716-4&crop=0&crop=0&crop=1&crop=1&from=drop&id=ue8616235&margin=%5Bobject%20Object%5D&name=artew.gif&originHeight=275&originWidth=488&originalType=binary&ratio=1&rotation=0&showTitle=false&size=235029&status=done&style=stroke&taskId=u2a3683aa-d422-4f96-9597-a6ee91c2ef8&title=)
<a name="PvrN4"></a>
##### src/index.js  一级路由
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import Home from './components/Home'
import User from './components/User'
import Profile from './components/Profile'
ReactDOM.render(
  <Router basename="/m">
    <ul>
      <li><Link to="/">首页</Link></li>
      <li><Link to="/user">用户管理</Link></li>
      <li><Link to="/profile">个人中心</Link></li>
    </ul>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/user" component={User} />
      <Route path="/profile" component={Profile} />
      <Route render={props => <div>未发现路由页面</div>} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

src/components/User.js 二级路由

import { Redirect, Route, Switch, Link} from 'react-router-dom';
import UserList from './UserList';
import UserAdd from './UserAdd';
import UserDetail from './UserDetail';
const User = (ps) => {
  console.log('User', ps);
  return (
    <div>
      <ul>
        <li><Link to="/user/list">用户列表</Link></li>
        <li><Link to="/user/add">添加用户</Link></li>
      </ul>
      <Switch>
        <Route path="/user/list" component={UserList} />
        <Route path="/user/add" component={UserAdd} />
        <Route path="/user/detail/:id" component={UserDetail} />
        <Redirect to="/user/list" />
      </Switch>
    </div>
  )
}
export default User;

src/utils.js 模拟数据

export const UserAPI = {
  list(){
    let usersString = localStorage.getItem('users');
    let users = usersString ? JSON.parse(usersString) : [];
    return users;
  },
  add(user){
    let users = UserAPI.list();
    users.push(user);
    localStorage.setItem('users', JSON.stringify(users));
  },
  find(id){
    let users = UserAPI.list();
    return users.find(item => item.id === id);
  },
}

src/components/UserList.js

import React from 'react'
import { Link} from 'react-router-dom';
import { UserAPI } from '../utils'
class UserList extends React.Component {
  state = {users: []}
  componentDidMount(){
    let users = UserAPI.list();
    this.setState({users});
  }
  render (){
    return (
      <ul>
        {this.state.users.map(item => (
          <li key={item.id}>
            <Link to={{
              pathname: `/user/detail/${item.id}`,
              state: item,
            }}>{item.name}</Link>
          </li>
        ))}
      </ul>
    )
  }
}
export default UserList;

src/components/UserAdd.js

import React from 'react'
import { UserAPI } from '../utils'
class UserAdd extends React.Component {
  nameRef = React.createRef();
  handleSubmiit = (event) => {
    event.preventDefault();
    let name = this.nameRef.current.value;
    UserAPI.add({ id: Date.now() + '', name });
    this.props.history.push('/user/list');
  }
  render (){
    return (
      <form onSubmit={this.handleSubmiit}>
        <input type="text" ref={this.nameRef} />
        <button type="submit">提交</button>
      </form>
    )
  }
}
export default UserAdd;

src/components/UserDetail.js

import React from 'react'
import { UserAPI } from '../utils';
class UserDetail extends React.Component {
  state = {user: {}}
  componentDidMount(){
    let user = this.props.location.state;
    if (!user){
      let id = this.props.match.params.id;
      user = UserAPI.find(id);
    }
    if (user) this.setState({user});
  }
  render (){
    let { user } = this.state;
    return (
      <div>
        <p>ID: {user.id}</p>
        <p>name: {user.name}</p>
      </div>
    )
  }
}
export default UserDetail;

受保护路由

进入需要权限的路由页面a，没权限的话(比如没登录)，先去登录，登录后再跳回之前的路由页面a。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Redirect, Link} from 'react-router-dom';
import Home from './components/Home'
import User from './components/User'
import Profile from './components/Profile'
import Protected from './components/Protected'
import Login from './components/Login'
ReactDOM.render(
  <Router basename="/m">
    <ul>
      <li><Link to="/">首页</Link></li>
      <li><Link to="/user">用户管理</Link></li>
      <li><Link to="/profile">个人中心</Link></li>
    </ul>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/user" component={User} />
-     {/* <Route path="/profile" component={Profile} /> */}
+     <Protected path="/profile" component={Profile} /> {/*如果用户登录了，才可以访问 profile 页面*/}
+     <Route path="/login" component={Login} />
      <Route render={props => <div>未发现路由页面</div>} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

src/components/Protected.js

import { Route, Redirect } from 'react-router-dom'
const Protected = (ps) => {
  let {path, component: RouteComponent} = ps;
  return (
    <Route path={path} render={routeProps => (
      localStorage.getItem('login') ? <RouteComponent {...routeProps} />
        : <Redirect to={{pathname: "/login", state: {from: path}}} />
    )} />
  )
}
export default Protected;

src/components/Login.js

import React from 'react'
class UserAdd extends React.Component {
  login = () => {
    let {props, state} = this;
    localStorage.setItem('login', 'true');
    let to = '/';
    if (props.location.state) to = props.location.state.from || '/';
    props.history.push(to);
  }
  render (){
    return (<button onClick={this.login}>登录</button>)
  }
}
export default UserAdd;

NavLink

一个特殊版本的Link，当它与当前 URL 匹配时，为其渲染元素添加样式属性。

activeClassName: string

要给出的元素的类处于活动状态时。默认的给定类是active。它将与className属性一起使用。

activeStyle: object

当元素处于active时应用于元素的样式。

exact

strict

isActive: func

一个为了确定链接是否处于活动状态而添加额外逻辑的函数，如果你想做的不仅仅是验证链接的路径名与当前 URL 的pathname是否匹配，那么应该使用它。

location

isActive比较当前的历史 location（通常是当前的浏览器 URL ）。为了与不同的位置进行比较，可以传递一个location。

示例

<ul>
  <li>
    <NavLink 
      className="nav-link"
      activeClassName="nav-link-active"
      style={{color: 'grey'}}
      activeStyle={{color: 'red'}}
      exact
      to="/">首页</NavLink>
  </li>
  <li>
    <NavLink 
      className="nav-link"
      activeClassName="nav-link-active"
      style={{color: 'grey'}}
      activeStyle={{color: 'red'}}
      to="/user">用户管理</NavLink>
  </li>
  <li>
    <NavLink 
      className="nav-link"
      activeClassName="nav-link-active"
      style={{color: 'grey'}}
      activeStyle={{color: 'red'}}
      to="/profile">个人中心</NavLink>
  </li>
</ul>

withRouter

通过withRouter高阶组件访问history对象的属性和最近的的match。 当路由渲染时，withRouter会将已经更新的match，location和history属性传递给被包裹的组件。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Home from './components/Home'
// import User from './components/User'
import Profile from './components/Profile'
import NavBar from './components/NavBar'
ReactDOM.render(
  <Router basename="/m">
    <NavBar title="返回首页" />
    <Switch>
      <Route exact path="/" component={Home} />
      {/* <Route path="/user" component={User} /> */}
      <Route path="/profile" component={Profile} />
      <Route render={props => <div>未发现路由页面</div>} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

src/components/NavBar.js

import React from 'react';
import {withRouter} from 'react-router-dom'
function NavBar(props){
  console.log(props);
  return (
    <div onClick={() => props.history.push('/')}>
      {props.title}
    </div>
  )
}
export default withRouter(NavBar);

Prompt 跳转拦截

export interface PromptProps {
    message: string | ((location: H.Location, action: H.Action) => string | boolean);
    when?: boolean;
}
export class Prompt extends React.Component<PromptProps, any> {}

src/components/Profile.js

import { Prompt } from 'react-router-dom';
const Profile = (ps) => {
  return (
    <div>
      <span>Profile</span>
      {/* Prompt 的 when 属性为true就阻止；否则不阻止 */}
      <Prompt when={true} message={(location, action) => {
        return `请问你真的要跳到${location.pathname}去吗？`;
      }} />
    </div>
  )
}
export default Profile;

hooks

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link,
  useParams, useLocation, useHistory, useRouteMatch
} from 'react-router-dom';
function UserDetail(){
  let params = useParams(); //获取路径参数 {id: '1'}
  let history = useHistory(); //获取历史对象(history对象)
  let location = useLocation(); //获取路径对象  {pathname, search, hash, state, key}
  console.log(params, history, location,);
  return <div>{`id: ${params.id} -- name: ${location.state.name}`}</div>;
}
function Post(){
  //获取路由匹配match对象 {isExact, params, path, url}
  let match = useRouteMatch({
    path: '/post/:id',
    strict: false,  //是否严格匹配
    sensitive: false, //大小写是否敏感
  });
  return match ? <div>{`id: ${match.params.id}`}</div> : <div>not found</div>
}
ReactDOM.render(
  <Router basename="/m">
    <ul>
      <li><Link to="/">首页</Link></li>
      <li><Link to={{pathname: `/user/detail/1`, state: {id:1, name: '张三'}}}>用户详情</Link></li>
      <li><Link to="/post/1">帖子</Link></li>
    </ul>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/user/detail/:id" component={UserDetail} />
      <Route path="/post" component={Post} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

路由懒加载 Suspense、lazy

Suspense

在动态导入的帮助下，React Suspense让我们轻松定义延迟加载的组件。

// OtherComponent是通过懒加载加载进来的，所以渲染页面的时候可能会有延迟，
// 但使用了Suspense之后，可优化交互。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
// 在 <OtherComponent /> 外面使用Suspense标签，
// 并在fallback中声明OtherComponent加载完成前做的事，即可优化整个页面的交互
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

lazy

示例1:

import React, {Suspense, lazy} from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
ReactDOM.render(
  <Router>
    <Switch>
      <Suspense fallback={<div>loading...</div>}>
        <Route exact path="/" component={lazy(() => import('./components/Home'))} />
        <Route path="/profile" component={lazy(() => import('./components/Profile'))} />
      </Suspense>
    </Switch>
  </Router>,
  document.getElementById('root')
);

示例2：

import React, {Suspense} from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
const LazyHome = React.lazy(() => import('./components/Home'));
const LazyProfile = React.lazy(() => import('./components/Profile'));
function Loading(){
  return <div>loading...</div>;
}
ReactDOM.render(
  <Router basename="/m">
    <Switch>
      <Route exact path="/" component={(props) => (
        <Suspense fallback={<Loading />}>
          <LazyHome {...props} />
        </Suspense>
      )} />
      <Route path="/profile" component={(props) => (
        <Suspense fallback={<Loading />}>
          <LazyProfile {...props} />
        </Suspense>
      )} />
    </Switch>
  </Router>,
  document.getElementById('root')
);