React 路由
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> 可以嵌套。第一个 <Route> 的路径为 / 并且渲染 Layout 组件。
嵌套的 <Route> 继承并添加到父路由。因此，blogs 路径与父路径组合，变为 /blogs。
Home 组件路由没有路径，但具有 index 属性。这将指定此路由作为父路由（即 /）的默认路由。
将 path 设置为 * 将充当任何未定义 URL 的捕获所有内容。这非常适合 404 错误页面。
页面/组件
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;
