react中v6路由配置
时间: 2023-11-15 07:56:22 浏览: 48
在 React v6 中,路由配置可以使用 `react-router-dom` 库来实现。具体步骤如下:
1. 安装 `react-router-dom` 库:`npm install react-router-dom`
2. 在 `App.js` 中引入 `BrowserRouter` 组件,并将整个应用包裹在其中:
```jsx
import { BrowserRouter } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
{/* 整个应用 */}
</BrowserRouter>
);
}
```
3. 在 `App.js` 中定义路由规则,使用 `Route` 组件来匹配路径和组件:
```jsx
import { Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</BrowserRouter>
);
}
```
上面的代码定义了三个路由规则,分别匹配路径为 `/`、`/about` 和 `/contact` 的页面,并分别渲染 `Home`、`About` 和 `Contact` 组件。
4. 在组件中使用 `Link` 组件来生成链接,点击链接时会自动跳转到对应的路由:
```jsx
import { Link } from 'react-router-dom';
function Navbar() {
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>
);
}
```
上面的代码生成了一个导航栏,包含三个链接,分别对应三个路由。