React Router的使用

一、React Router的安装

1. 官网： reactrouter.com/web/guides/…
2. 安装router： yarn add react-router-dom
3. 安装ts依赖： yarn add --dev @types/react-router-dom

二、React Router在React项目中的使用

1. 在App.tsx引入Router, Route, Switch, Link, Redirect

import {
  Router,
  Switch,
  Route,
  Link,
  Redirect,
} from 'react-router-dom';

2. 使用Router

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/tags">
          <Tags/>
        </Route>
        <Route exact path="/money">
          <Money/>
        </Route>
        <Redirect exact from="/" to="/money"/>
        <Route path="*">
          <NoMatch/>
        </Route>
      </Switch>
      <ul>
        <li>
          <Link to="/tags">标签</Link>
        </li>
        <li>
          <Link to="/money">记账</Link>
        </li>
      </ul>
    </Router>
  );
}

代码说明：

• Router: 需要在Router标签里写入路由相关的代码

• Link: 跟a标签类似，to属性的值就是要跳转的路由的地址

• Switch: 用来渲染第一个与地址匹配的Route或者Redirect

• Route: 它的path属性对应Link的to属性，它包裹的内容就是这个path对应的组件

• exact: 这个属性表示精准匹配

• Redirect: 重定向，与Route类似，from表示原来的地址，to属性表示定位到新的地址，可以用来做默认页面

• 如果需要对点击的链接添加样式，将Link替换为NavLink，通过activeClassName属性让活动链接和非活动链接有不同的样式