react 路由配置
时间: 2023-08-29 09:13:46 浏览: 200
React 路由可以通过 React Router 库来实现。以下是一个基本的 React 路由配置示例:
1. 安装 React Router
```
npm install react-router-dom
```
2. 引入 React Router
```js
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
```
3. 在 Router 中定义路由
```js
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="*" component={NotFound} />
</Switch>
</Router>
);
}
```
其中,`exact` 表示精确匹配路径,`path` 表示路由路径,`component` 表示对应的组件。`Switch` 表示只匹配其中一个路由,如果没有匹配到任何一个路由,则会跳转到 `NotFound` 组件。
4. 在组件中使用路由
在组件中可以使用 `Link` 组件来进行路由跳转:
```js
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<h1>Home</h1>
<ul>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</div>
);
}
```
以上就是一个简单的 React 路由配置示例。
阅读全文