React-Router使用指南

一、背景

本文基于React-Router V5版本。

参考链接

二、使用指南

1、基本写法

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/*switch从上往下匹配第一个符合的url */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

2、路由参数

我们可以用冒号 + 参数名字的方式，将想要传递的参数添加到 URL 上，此时，当参数名字对应的值改变时，将被认为是不同 URL。

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";
import {render} from 'react-dom';

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Topics() {
  let match = useRouteMatch();

  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>
            Props v. State
          </Link>
        </li>
      </ul>

      {/* The Topics page has its own <Switch> with more routes
       that build on the /topics URL path. You can think of the
       2nd <Route> here as an "index" page for all topics, or
       the page that is shown when no topic is selected */}
      <Switch>
        <Route path={`${match.path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={match.path}>
          <h3>Please select a topic.</h3>
        </Route>
      </Switch>
    </div>
  );
}

function Topic() {
  let { topicId } = useParams();
  return <h3>Requested topic ID: {topicId}</h3>;
}

三、组件

1、BrowserRouter、HashRouter 路由组件

HashRouter与 BrowserRouter的区别_不能懒鸭的博客-CSDN博客_hashrouter

2、Route、Switch 路由匹配组件

Switch：从上到下匹配子Route，找到第一个渲染；没有匹配到则不渲染。

Route: Route的path匹配URL的开端，因此path='/'总是能匹配到URL。可以使用<Route exact path="/">匹配整个URL.

useRouteMatch：匹配path useRouteMatch

React-Router传递参数_火星飞鸟的博客-CSDN博客_react router 传递参数

3、Link、NavLink、Redirect

<Link to="/">Home</Link>
// <a href="/">Home</a>

<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>

<Redirect to="/login" />

四、服务端渲染

五、代码拆分

可参考

@babel/plugin-syntax-dynamic-import

{
  "presets": ["@babel/preset-react"],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

loadabel-components

六、滚动还原

未完待续....