react-route 跳转页面
时间: 2023-06-21 07:13:06 浏览: 55
在 React 中使用 react-router-dom 库来进行页面跳转。首先需要安装该库:
```
npm install react-router-dom
```
然后在应用的入口文件中,引入 BrowserRouter 组件:
```jsx
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
```
接下来,可以在应用中使用 Link 组件来进行页面跳转。例如,在一个导航栏中设置两个链接:
```jsx
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<ul>
<li>
<Link to="/">首页</Link>
</li>
<li>
<Link to="/about">关于我们</Link>
</li>
</ul>
</nav>
);
}
```
当用户点击导航栏中的链接时,会自动跳转到对应的页面。例如,在一个名为 About 的组件中,可以设置如下代码:
```jsx
function About() {
return (
<div>
<h2>关于我们</h2>
<p>这是我们的网站,欢迎访问!</p>
</div>
);
}
```
然后在应用的路由配置中,将 About 组件与 /about 路径匹配:
```jsx
import { Switch, Route } from 'react-router-dom';
function App() {
return (
<div>
<Navbar />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
</div>
);
}
```
这样,当用户访问 /about 路径时,就会展示 About 组件的内容了。