安装React Router

reactrouter.com/
yarn add react-router-dom@6
yarn add --dev @types/react-router-dom // 安装types依赖

demo

过程中出现很多报错，但按照提示解决有时候就掉进坑里了，有时候重启项目，或者npm install，或者yarn重新安装依赖，就好了

在Google搜索react router，官网的知道文档并不能直接运行，所含组件没有提供，只有导入文件有点价值

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

继续搜索react router，在github上找到，并按照指导文档来
github.com/remix-run/r…
结合12，完成demo，与学习资料上相比，是Routes而不是Switch

react-router-dom从V5升级到V6后, Switch重命名为Routes，有许多好处，其中包体积变小，让我觉得很好，尝试使用：blog.csdn.net/m0_67402731…

import React from 'react';
import { Link } from 'react-router-dom';
import {
    BrowserRouter,
    Routes,
    Route,
} from "react-router-dom";
function App() {
  return (
      <BrowserRouter>
          <h1>Welcome to React Router!</h1>
          <Routes>
              <Route path="/" element={<Home />} />
              <Route path="about" element={<About />} />
          </Routes>
      </BrowserRouter>
  );
}
function Home() {
    return (
        <>
            <main>
                <h2>Welcome to the homepage!</h2>
                <p>You can do this, I believe in you.</p>
            </main>
            <nav>
                <Link to="/about">About</Link>
            </nav>
        </>
    );
}

function About() {
    return (
        <>
            <main>
                <h2>Who are we?</h2>
                <p>
                    That feels like an existential question, don't you
                    think?
                </p>
            </main>
            <nav>
                <Link to="/">Home</Link>
            </nav>
        </>
    );
}
export default App;

no match 页面，错误页面，放在最后， path="*"
默认页面

<Route path="/" element={<Money />} /> {/*默认页面*/}

最后的整个页面：

import React from 'react';
import { Link } from 'react-router-dom';
import {
    BrowserRouter,
    Routes,
    Route,
} from "react-router-dom";
function App() {
  return (
      <BrowserRouter>
          <nav><ul>
              <li><Link to="/tags">标签页</Link></li>
              <li><Link to="/money">记账页</Link></li>
              <li><Link to="/statistics">统计页</Link></li>
          </ul>
          </nav>
          <Routes >
              <Route>
                  <Route path="/" element={<Money />} /> {/*默认页面*/}
                  <Route path="/tags" element={<Tags />} />
                  <Route path="/money" element={<Money />} />
                  <Route path="/statistics" element={<Statistics />} />
                  {/*错误页面*/}
                  <Route
                      path="*"
                      element={
                          <main style={{ padding: "1rem" }}>
                              <h1>404!</h1>
                          </main>
                      }
                  />
              </Route>
          </Routes>
      </BrowserRouter>
  );
}
function Tags() {
    return (
        <>
            <main>
                <h2>标签页</h2>
                <p>You can do this, I believe in you.</p>
            </main>
        </>
    );
}

function Money() {
    return (
        <>
            <main>
                <h2>记账页</h2>
                <p>
                    That feels like an existential question, don't you
                    think?
                </p>
            </main>
        </>
    );
}

function Statistics() {
    return (
        <>
            <main>
                <h2>统计页</h2>
                <p>
                    That feels like an existential question, don't you
                    think?
                </p>
            </main>
        </>
    );
}
export default App;

从0开发React项目-6-路由器：React Router V6 使用

安装React Router

demo