一个快速的React Router 6例子

一个快速的React Router 6例子，应该可以让你开始运行。这个React Router v6教程的代码可以在这里找到。为了让你开始，创建一个新的React项目（例如：create-react-app）。之后，安装React Router，并阅读下面的React Router教程，让自己对接下来的内容有所了解。

这个例子的特点是Routes和Links之间的匹配，一个所谓的Layout Route用于封装同一布局中的组件（见Layout组件），一个所谓的Index Route与Home组件一起加载，一个所谓的No Match Route与React元素一起加载。如果没有特定的路径（Index Route）或者路径无法与Route（No Match Route）相匹配，两者都作为后备路由。此外，这个例子也有主动链接的功能。

import * as React from 'react';
import { Routes, Route, Outlet, NavLink } from 'react-router-dom';

const App = () => {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="home" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="*" element={<p>There's nothing here: 404!</p>} />
      </Route>
    </Routes>
  );
};

const Layout = () => {
  const style = ({ isActive }) => ({
    fontWeight: isActive ? 'bold' : 'normal',
  });

  return (
    <>
      <h1>React Router</h1>

      <nav
        style={{
          borderBottom: 'solid 1px',
          paddingBottom: '1rem',
        }}
      >
        <NavLink to="/home" style={style}>
          Home
        </NavLink>
        <NavLink to="/about" style={style}>
          About
        </NavLink>
      </nav>

      <main style={{ padding: '1rem 0' }}>
        <Outlet />
      </main>
    </>
  );
};

const Home = () => {
  return (
    <>
      <h2>Home</h2>
    </>
  );
};

const About = () => {
  return (
    <>
      <h2>About</h2>
    </>
  );
};

export default App;

如果你正在寻找一个更深入的教程来了解React Router v6的所有概念，可以看看下面这个教程。

从那里你会有很多材料来探索React Router的更多高级概念，如嵌套路由、动态路由、子嗣路由、私有/受保护路由和React Router的认证。