redux根组件导航栏实现页面点击跳转
时间: 2023-10-09 22:06:13 浏览: 42
要实现页面点击跳转,我们需要在导航栏中添加链接,然后在点击链接时触发页面跳转。在使用Redux时,我们可以在根组件中使用React Router来处理页面跳转。
首先,我们需要在根组件中引入React Router库和相关组件:
```javascript
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
```
然后,我们可以在导航栏中添加链接。例如,我们可以在顶部导航栏中添加一个链接到主页:
```javascript
const Navigation = () => (
<nav>
<ul>
<li><Link to="/">Home</Link></li>
</ul>
</nav>
);
```
接着,在根组件中使用Router组件来包裹整个应用,并在其中定义页面路由。例如,我们可以为主页定义一个路由:
```javascript
class App extends React.Component {
render() {
return (
<Router>
<div>
<Navigation />
<Route exact path="/" component={HomePage} />
</div>
</Router>
);
}
}
```
最后,在HomePage组件中可以添加一些内容,例如:
```javascript
const HomePage = () => (
<div>
<h1>Welcome to my website!</h1>
<p>Here you can find all sorts of interesting things.</p>
</div>
);
```
这样,当用户点击导航栏中的“Home”链接时,就会跳转到主页,并显示HomePage组件中定义的内容。你也可以添加更多的链接和页面路由,以实现更复杂的页面跳转。