React Router

Posted on Edited on

基本使用

安装

yarn add react-router-dom或npm i react-router-dom

使用

导入路由核心组件

1
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

使用Router包裹整个应用.

1
2
3
<Router>
  <div className="App">//...</div>
</Router>

指定路由入口和出口

1
2
3
4
5
6
7
8
9
const First = () => <p>页面</p>;
const App = () => {
  <Router>
    <div>
      <Link to="/first">页面</Link>
      <Route path="/first" component={First} />
    </div>
  </Router>;
};

注意: v6 版本中将 component 替换成了 element.

常见组件

Router

包裹整个组件,一个 React 应用只使用一次.
两种常用 Router: Browser Router和HashRouter

用于指定导航链接,最终会被编译为<a>

Route

展示组件相关信息

  • path 属性: 路由规则
  • component 属性: 展示的组件
  • Route 写在哪,渲染的组件就展示在哪

Switch(v6 已弃用)

使用Switch包裹路由就会只加载一个匹配的路由.

注意: v6 版本使用 Routes 替换 Switch.

作用: 选中的 Link 有class="active",就可以给对应的类加上样式.

其他参数

1
2
3
4
5
6
7
<NavLink activeClassName="selected" exact
  to={{
    pathname="/mine",
    search="?sort=name",
    hash="#the-hash",
    state={flag: 'flag'} //可以隐式传参
  }}>Mine页面</NavLink>

Redirect(v6 弃用)

v6 弃用,使用 Navigate 替代.

from 是输入某个路径,to 是要跳转的路径.

1
<Redirect from="/home" to="/" />

其他方法

push和replace
区别: push叠加, replace直接替换.

1
2
3
4
5
6
7
const Mine = () => {
  const handleClick = () => {
    props.history.push("/home");
    props.history.replace("/home");
  };
  return <button onClick={handleClick}>Click</button>;
};

场景: 首页重定向到指定路由,url 中包含该路由地址

1
2
// 直接将Navigate作为element组件
<Route path="/" element={<Navigate to={"/projects"} />} />

withRouter

高阶组件,用于当前组件没有被Router包裹,而无法拿到相关的参数.
使用withRouter(Mine)包裹即可.

Prompt(v6 弃用)

类似钩子函数,用于跳转之前的操作

1
<Prompt when={!!this.state.name} message={"确定离开?"} />

编程式导航

push(path)

push 表示跳转到某个页面,参数 path 表示要调整的路径.
this.props.history.push("/home")

go(n)

前进或后退到某个页面,参数 n 表示前进或后退的页面数量

默认路由

1
<Route path="/" component={Home} />

模糊匹配

React 默认使用模糊匹配,即 pathname 相同即会匹配.

精确匹配

关键字: exact
更加精准: strict

404 页面

当所有规则都没有匹配中时,设置 404 页面.即不设置规则.

简约写法

1
<Route path="/" render={() => <Home />} />

参数传递

在 path 上使用path="name/:name/:id?",使用冒号传递,问号表示可选.

读取

props.match.params.name

其他读取方式

1
2
3
4
5
6
7
8
9
10
import querystring from "querystring";

const Mine = (props) => {
  const params = new URLSearchParams(props.location.search);
  console.log(params.get("name"));
  //第二种
  const value = querystring.parse(props.location.search); //注意会获取前面的?,要截取
  console.log(value);
  return <p>Mine</p>;
};

路由嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Book from "./Book";
import WebBook from "./WebBook";
import JavaBook from "./JavaBook";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" component={Home} />
          <Book>
            <Switch>
              <Route path="/book/webBook" component={WebBook}></Route>
              <Route path="/book/javaBook" component={JavaBook}></Route>
            </Switch>
          </Book>
        </Switch>
      </Router>
    </div>
  );
}