React Router
Create React App 不包含页面路由。
React Router 是最流行的解决方案。
添加 React Router
要将 React Router 添加到你的应用程序中，请在应用程序的根目录的终端中运行此命令：
npm i -D react-router-dom
注意：本教程使用 React Router v6。
如果你从 v5 升级，则需要使用 @latest 标志
npm i -D react-router-dom@latest
文件夹结构
要创建一个具有多个页面路由的应用程序，让我们先从文件结构开始。
在 src 文件夹内，我们将创建一个名为 pages 的文件夹，其中包含几个文件
src\pages\:
Layout.jsHome.jsBlogs.jsContact.jsNoPage.js
每个文件将包含一个非常基础的 React 组件。
基本用法
现在我们将在 index.js 文件中使用我们的 Router。
示例
使用 React Router 根据 URL 进行页面路由
index.js:
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);示例解释
我们首先用 <BrowserRouter> 包裹我们的内容。
然后我们定义我们的 <Routes>。一个应用程序可以有多个 <Routes>。我们的基本示例只使用了一个。
<Route>s 可以嵌套。第一个 <Route> 的 path 是 /，它渲染 Layout 组件。
嵌套的 <Route>s 继承并扩展了父路由。因此，blogs 的 path 与父路由结合，变成了 /blogs。
Home 组件路由没有 path，但有一个 index 属性。这指定该路由是父路由（即 /）的默认路由。
将 path 设置为 * 将作为所有未定义 URL 的捕获。这对于 404 错误页面非常有用。
Pages / Components
Layout 组件包含 <Outlet> 和 <Link> 元素。
<Outlet> 渲染当前选中的路由。
<Link> 用于设置 URL 并跟踪浏览历史。
每当我们链接到内部路径时，我们将使用 <Link> 而不是 <a href="">。
“布局路由”是一个共享组件，它在所有页面上插入通用内容，例如导航菜单。
Layout.js:
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};
export default Layout;
Home.js:
const Home = () => {
return <h1>Home</h1>;
};
export default Home;
Blogs.js:
const Blogs = () => {
return <h1>Blog Articles</h1>;
};
export default Blogs;
Contact.js:
const Contact = () => {
return <h1>Contact Me</h1>;
};
export default Contact;
NoPage.js:
const NoPage = () => {
return <h1>404</h1>;
};
export default NoPage;
