react-router-dom v6路由怎么配置
时间: 2023-06-01 21:02:33 浏览: 314
在 react-router-dom v6 中,路由配置方式有所变化。以下是基本的路由配置方式:
1. 首先,需要安装 react-router-dom v6:
```bash
npm install react-router-dom@next
```
2. 在 App.js 文件中导入 `Routes` 和 `Route` 组件:
```js
import { Routes, Route } from 'react-router-dom';
```
3. 在 `Routes` 组件中添加路由配置,其中 `Route` 组件定义了一个路由:
```js
function App() {
return (
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
);
}
```
4. 在每个组件中,需要导入 `useNavigate` 钩子,用于在组件中进行页面跳转:
```js
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about');
};
return (
<div>
<h1>Home</h1>
<button onClick={handleClick}>Go to About page</button>
</div>
);
}
```
5. 如果需要在组件中获取路由参数,可以使用 `useParams` 钩子:
```js
import { useParams } from 'react-router-dom';
function About() {
const { id } = useParams();
return (
<div>
<h1>About</h1>
<p>ID: {id}</p>
</div>
);
}
```
以上就是 react-router-dom v6 路由的基本配置方式。
阅读全文