react-router 使用笔记

路由模式（hash,h5 history)

• hash 模式（默认），如：abc.com/#/user/10
• h5 history 模式，如：abc.com/user/20，备注：…

路由配置（动态路由，懒加载）

• 路由跳转的两种方式

  • 声明式：<Link to="/home">返回主页(Link标签 声明式跳转)</Link>
  • 命令式：

  const handleReturnHomePage = (
    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
  ) => {
    event.preventDefault();
    history.push('/home');
  };
  <a href="" onClick={handleReturnHomePage}>
    返回主页(history.push(路由地址) 命令式跳转)
  </a>;
  

• 路由懒加载 React.lazy、Suspense、import() 相关文章：代码分割

  路由懒加载的使用:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  <Router>
    <Suspense fallback={<div>loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/about" component={About} />
      </Switch>
    </Suspense>
  </Router>;
};

export default App;

ReactRouterDemo

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

  const Posts = () => {
    const { id } = useParams<{ id: string }>(); // 获取路由参数
    const history = useHistory(); // 获取路由器实例，调用实例方法

    const handleReturnHomePage = (
      event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
    ) => {
      event.preventDefault();
      history.push('/home');
    };

    return (
      <div>
        <h3>文章详情页</h3>
        <p>获取动态参数(文章ID)): {id}</p>
        <div>
          <Link to="/home">返回主页(Link标签 声明式跳转)</Link>
          <div>
            <a href="" onClick={handleReturnHomePage}>
              返回主页(history.push(路由地址) 命令式跳转)
            </a>
          </div>
        </div>
      </div>
    );
  };

  const ReactRouterDemo: React.FC = () => {
    return (
      <Router>
        <hr />
        <ul>
          <li>
            <Link to="/home">Home</Link>
          </li>
          <li>
            <Link to="/posts/100">文章详情页</Link>
          </li>
        </ul>
        <Switch>
          <Route exact path="/home">
            主页
          </Route>
          <Route path="/posts/:id">
            <Posts />
          </Route>
        </Switch>
      </Router>
    );
  };

  export default ReactRouterDemo;