要在
Redux 根组件
中实现导航栏的
页面点击跳转，可以结合 React Router 和
Redux。
首先，安装 React Router 和 React
Redux：
```bash
npm install react-router-dom react-
redux
```
然后，在根组件
中使用 `BrowserRouter` 和 `Provider` 包裹应用内容：
```javascript
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-
redux';
import
store from './
store';
function App() {
return (
<Provider
store={
store}>
<BrowserRouter>
{/* 应用的内容 */}
<Routes />
</BrowserRouter>
</Provider>
);
}
```
在
Redux 中，我们需要定义一个
Redux action 和 reducer，用来管理导航栏的当前选
中项：
```javascript
// actions.js
export const SELECT_NAV_ITEM = 'SELECT_NAV_ITEM';
export function selectNavItem(item) {
return {
type: SELECT_NAV_ITEM,
payload: item,
};
}
// reducer.js
import { SELECT_NAV_ITEM } from './actions';
const initialState = {
selectedNavItem: 'home',
};
function rootReducer(state = initialState, action) {
switch (action.type) {
case SELECT_NAV_ITEM:
return {
...state,
selectedNavItem: action.payload,
};
default:
return state;
}
}
export default rootReducer;
```
在组件
中使用 `connect` 函数将
Redux store 中的 `selectedNavItem` 属性映射到组件的 props
中：
```javascript
import { connect } from 'react-
redux';
function Navbar({ selectedNavItem, selectNavItem }) {
const handleItemClick = (item) => {
selectNavItem(item);
};
return (
<nav>
<ul>
<li className={selectedNavItem === 'home' ? 'active' : ''}>
<a href="#" onClick={() => handleItemClick('home')}>
首页
</a>
</li>
<li className={selectedNavItem === 'about' ? 'active' : ''}>
<a href="#" onClick={() => handleItemClick('about')}>
关于我们
</a>
</li>
</ul>
</nav>
);
}
const mapStateToProps = (state) => {
return {
selectedNavItem: state.selectedNavItem,
};
};
const mapDispatchToProps = {
selectNavItem,
};
export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
```
最后，在 `Routes` 组件
中定义路由规则，并根据 `selectedNavItem` 属性
渲染对应的
页面：
```javascript
import { Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
function Routes({ selectedNavItem }) {
return (
<Switch>
<Route path="/" exact>
{/*
渲染首页 */}
<Home />
</Route>
<Route path="/about">
{/*
渲染关于
页面 */}
<About />
</Route>
{/* 其他
页面 */}
</Switch>
);
}
const mapStateToProps = (state) => {
return {
selectedNavItem: state.selectedNavItem,
};
};
export default connect(mapStateToProps)(Routes);
```
这样，当用户点击导航栏
中的某个项时，会触发
Redux action 更新 `selectedNavItem` 属性，导致
页面重新渲染并显示对应的
页面内容。
1508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
