React Router
DOM v6 是一个用于 React 应用程序的路由库。它提供了一种在应用程序中进行页面导航和管理的方式。
下面是一个简单的使用教程来帮助你开始使用 React Router
DOM v6：
1. 安装 React Router
DOM v6：
```shell
npm install react-router-
dom@next
```
注意：v6 目前仍然是预发布版本，所以需要添加 `@next` 后缀来安装最新版本。
2. 在你的应用程序的入口文件（通常是 `index.
js`）中导入所需的组件：
```
jsx
import { BrowserRouter as Router, Route, Link } from 'react-router-
dom';
```
3. 使用 `Router` 组件将你的应用程序包裹起来，并定义你的路由规则：
```
jsx
React
DOM.render(
<Router>
<Route path="/" component={App} />
</Router>,
document.getElementById('root')
);
```
这个例子中，所有匹配 `/` 路径的组件都将渲染 `App` 组件。
4. 在你的应用程序的其他组件中使用 `Link` 组件来创建导航链接：
```
jsx
import { Link } from 'react-router-
dom';
function Navigation() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
);
}
```
这个例子中，点击链接将会导航到对应的路径。
5. 在你的应用程序的其他组件中使用 `Route` 组件来定义不同路径下的组件渲染：
```
jsx
import { Route } from 'react-router-
dom';
function App() {
return (
<div>
<h1>My App</h1>
<Route exact path="/" component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route path="/contact" component={ContactPage} />
</div>
);
}
```
这个例子中，`HomePage` 组件将会在 `/` 路径下渲染，`AboutPage` 组件将会在 `/about` 路径下渲染，`ContactPage` 组件将会在 `/contact` 路径下渲染。
这只是 React Router
DOM v6 的一些基本用法，还有很多其他功能和概念可以
学习。你可以查阅官方文档以获取更多详细的信息和示例代码：https://reactrouter.com/docs/en/v6
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
