React Router V4 侧边栏菜单中的错误 [英] Bugs in Sidebar Menu with React Router V4

问题描述

我正在开发一个单页 ReactJS Web 应用程序，但我知道在使用 React Router V4 定义路由时我做错了.

I'm developing a single-page ReactJS Web app but I know I'm doing something wrong while defining my routing with React Router V4.

我的问题如下:routes.js 文件中的 PrivateRoute 没有按预期工作.也就是说，我不知道为什么但是我的侧边栏菜单(我的主 App 的子组件)无法正常工作:当我单击我的主App 的菜单项时有一些错误PrivateRoute 组件(在本例中为 Page1).当我说错误时，我的意思是当我单击 PrivateRoute 的菜单项时，侧边栏菜单配置错误.组件的内容 (Page1) 已呈现，但侧边栏菜单中的菜单项没有保持高亮显示:它被重定向到列表中的第一个菜单项，在这种情况下 MainHome.

My problem is as follows: PrivateRoute in my routes.js file is not working as expected. That is, I don't know why but my sidebar menu, which is a child component of my main App, does not work properly: there are a few bugs when I click on the menu item of my PrivateRoute component (in this case, Page1). When I say bugs, I mean that when I click on the menu item of a PrivateRoute, the sidebar menu is misconfigured. The content of the component (Page1) is rendered but the menu item in the sidebar menu does not stay highlighted as it should be: it is redirected to the first menu item on the list, in this case MainHome.

尽管如此，如果我在 routes.js 中将 Page1 组件的标签从 PrivateRoute 更改为 ConfigRoute> 文件，一切正常.

Nonetheless, if I change the tag of my Page1 component from PrivateRoute to ConfigRoute in my routes.js file, everything works properly.

来自我的文件 index.js (main)、routes.js、App.js 和 side- 的示例-menu.js:

A sample from my files index.js (main), routes.js, App.js, and side-menu.js:

index.js(主)文件:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import Routes from './routes';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <Routes/>
  </Provider>,
  document.getElementById('root')
);

routes.js 文件:

import React, { Fragment } from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import Login from './login';
import App from './App';
import MainHome from './home';
import Page1 from './page1';

const ConfigRoute = ({ component: Component, layout: Layout, ...rest }) => (
  <Route {...rest} render={(props) => (
    <Layout>
      <Component {...props}/>
    </Layout>
  )}/>
);

const PrivateRoute = ({ component: Component, layout: Layout, auth_status, ...rest }) => (
  <Route {...rest} render={(props) => (
    <Fragment>
      {auth_status === true
        ? (
          <Layout>
            <Component {...props}/>
          </Layout>
          )
        : (
          <Redirect to={{ pathname: "/", state: { from: props.location } }}/>
          )
      }
    </Fragment>
  )}/>
);

const Routes = (props) => (
  <Router>
    <Switch>
      <Route exact path="/" component={Login}/>
      <ConfigRoute path="/home" layout={App} component={MainHome}/>
      <PrivateRoute path="/page1" auth_status={props.auth_status} layout={App} component={Page1}/>
    </Switch>
  </Router>
);

const mapStatetoProps = state => ({
  auth_status: state.auth.isAuthenticated,
});

export default connect(mapStatetoProps)(Routes);

App.js 文件

import React, { Component } from 'react';
import { Layout } from 'antd';
import SideMenu from './side-menu';
import MainHeader from './main-header';
import MainFooter from './main-footer';

const { Content } = Layout;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
    };
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <SideMenu collapsed={this.state.collapsed}/>
        <Layout>
          <MainHeader triggerParentUpdate={this.toggle} collapsed={this.state.collapsed}/>
          <Content style={{ margin: '24px 16px', padding: 24, background: '#ffffff', minHeight: 280 }}>
            {this.props.children}
          </Content>
          <MainFooter/>
        </Layout>
      </Layout>
    );
  }
}

export default App;

side-menu.js 文件:

import React from 'react';
import { Layout, Menu, Icon } from 'antd';
import { NavLink } from 'react-router-dom';

const { Sider } = Layout;
const SubMenu = Menu.SubMenu;

class SideMenu extends React.Component {

  render() {
    return (
      <Sider
        trigger={null}
        collapsible
        collapsed={this.props.collapsed}
        >
          <div className="logo"/>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <NavLink to="/home">
                <Icon type="home"/>
                <span>home</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="2">
              <NavLink to="/page1">
                <Icon type="star-o"/>
                <span>page 1</span>
              </NavLink>
            </Menu.Item>       
          </Menu>
        </Sider>
    );
  }
}

export default SideMenu;

推荐答案

我找到了一种可能的解决方案 here - 使用路径作为菜单键并提供位置作为selectedKeys:

I found one possible solution here - use the path as the menu keys and provide the location as the selectedKeys:

<Menu mode="inline" selectedKeys={[location.pathname]}>
  <Menu.Item key="/home">
    <Link to="/home">Home </Link>
  </Menu.Item>
...

您可以在此处

希望有帮助！

这篇关于React Router V4 侧边栏菜单中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！