redux根组件导航栏实现页面点击跳转

要在 Redux 根组件中实现导航栏的页面点击跳转，可以结合 React Router 和 Redux。

首先，安装 React Router 和 React Redux：

npm install react-router-dom react-redux

然后，在根组件中使用 `BrowserRouter` 和 `Provider` 包裹应用内容：

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，用来管理导航栏的当前选中项：

// 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 中：

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` 属性渲染对应的页面：

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` 属性，导致页面重新渲染并显示对应的页面内容。