React Router 是 React 应用程序中用于处理路由的库。它允许你定义应用程序的路径和组件，以及如何根据用户的请求动态加载这些组件。
安装 React Router
首先，你需要安装 React Router。可以通过 npm 或 yarn 来安装：
npm install react-router-dom
yarn add react-router-dom
基本路由
React Router 使用 <Route> 组件来定义路由。以下是一个简单的例子：
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={NotFound} />
</Switch>
</Router>
);
}
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
function Contact() {
return <h1>Contact Page</h1>;
}
function NotFound() {
return <h1>404 Not Found</h1>;
}
export default App;
嵌套路由
有时候，你可能需要在子组件中定义路由。React Router 允许你这样做：
function About() {
return (
<div>
<h1>About</h1>
<Route path="/about/team" component={Team} />
<Route path="/about/location" component={Location} />
</div>
);
}
function Team() {
return <h2>Team</h2>;
}
function Location() {
return <h2>Location</h2>;
}
图片展示
React Router 是一个强大的库，可以帮助你构建复杂的单页面应用程序。下面是一张 React Router 的图片，展示了它的核心概念。
更多关于 React Router 的教程，请访问我们的 React Router 教程 页面。
React Router 是一个强大的库，可以帮助你构建复杂的单页面应用程序。下面是一张 React Router 的图片，展示了它的核心概念。
