react-router-dom @6版本API变动

前言

最近发现react-router-dom已经有6版本了，于是决定体验一把。

安装

  npm i react-router-dom

我的默认是6.0.2版本

使用时候发现Switch引入Ts报错

变动

1.Switch替换成了Routes；
2.Route去除exact；
3.Route中统一使用element属性，去掉原来的component和render；
4.useNavigate取代useHistory;
5.可以省略path前的/

总的来说： 更加语义化、使用更为简洁。

使用

App.tsx

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Home } from "./page/home";
import { Login } from "./page/login";
import { Page1 } from "./page/page1";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <h1>router6</h1>
        <Routes>
          <Route path={"/"} element={<Home />}></Route>
          <Route path={"/login"} element={<Login />}></Route>
          <Route path={"/page1/*"} element={<Page1 />}></Route>
          <Route path={"/404"} element={<div>404</div>}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

home.tsx

import { Link } from "react-router-dom";
export const Home = () => {
  return (
    <>
      <h2>Where to, buddy?</h2>
      <ul>
        <li>
          <Link to={"/login"}>login</Link>
        </li>
        <li>
          <Link to={"/page1"}>page1</Link>
        </li>
      </ul>
    </>
  );
};

login.tsx(含useNavigate的使用)

import { useNavigate } from "react-router-dom";

export const Login = () => {
  const nav = useNavigate();

  const goHome = () => {
    nav("/");
  };

  return (
    <>
      <button onClick={goHome}>go Home</button>
      <br />
      login
    </>
  );
};

注意：useNavigate()不可以放到goHome函数里面会报错

 const goHome = () => {
    const nav = useNavigate();
    nav("/");
  };

page1.tsx(嵌套使用)

import { Route, Routes } from "react-router-dom";

export const Page1 = () => {
  return (
    <>
      <h3>page1</h3>
      <Routes>
        <Route path={"page1-1"} element={<>page1-1</>}></Route>
        <Route path={"page1-2"} element={<>page1-2</>}></Route>
      </Routes>
    </>
  );
};

以上就是一些变更的使用方法，同时新API:Outlet。
用于渲染当前路由下的子路由组件，我们对page1进行下改造变成page2： app.tsx

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Home } from "./page/home";
import { Login } from "./page/login";
import { Page1 } from "./page/page1";
import { Page2 } from "./page/page2";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <h1>router6</h1>
        <Routes>
          <Route path={"/"} element={<Home />}></Route>
          <Route path={"/login"} element={<Login />}></Route>
          <Route path={"/page1/*"} element={<Page1 />}></Route>
          <Route path={"page2"} element={<Page2 />}>
            <Route path={"page2-1"} element={<>page2-1</>}></Route>
            <Route path={"page2-2"} element={<>page2-2</>}></Route>
          </Route>
          <Route path={"/404"} element={<div>404</div>}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;
    

page2.tsx

import { Outlet } from "react-router-dom";

export const Page2 = () => {
  return (
    <>
      <h3>page2</h3>
      {/* 访问子路由组件时候渲染 */}
      <Outlet />
    </>
  );
};

当访问 /page2/page2-1时 Outlet 渲染子组件page2-1。

注意path路径不要加/(/page2),h会找不到路由

省略path前的/