Question

我在使用React Switch时遇到一些问题。我正在尝试在布局内部进行布局。因此，您已经知道此代码可以正常工作。

import React from "react";
import {Redirect, Route, Switch} from "react-router-dom";
import asyncComponent from "util/asyncComponent";

const Dashboard = ({match}) => (
  <Switch>
    <Redirect exact from={`${match.url}/`} to={`${match.url}/dasboard`}/>
    <Route path={`${match.url}/crm`} component={asyncComponent(() => import('./GamePanel/index'))}/>
    <Route path={`${match.url}/link`} component={asyncComponent(() => import('./Servers'))}/> </Switch>
);

export default Dashboard;

现在在这段代码中，我必须定义const isAuthenticated并添加布局，而我正在这样做。

import React, { Component } from "react";
import { Col, Menu } from "antd";
import { connect } from "react-redux";

import { Redirect, Route, Switch, Link } from "react-router-dom";
import asyncComponent from "util/asyncComponent";

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class Servers extends Component {
    state = {
        current: 'News',
    }

    handleClick = (e) => {
        console.log('click ', e);
        this.setState({
            current: e.key,
        });
    }
    render() {
        const { isAuthenticated } = this.props;
        const { match } = this.props;

        if (!isAuthenticated) {
            return <Redirect to="/home" />;
        }

        return (
            <Col span={24}>
                <Menu
                    onClick={this.handleClick}
                    selectedKeys={[this.state.current]}
                    mode="horizontal"
                >
                    <Menu.Item key="News">
                        <Link to="/GamePanel/News"><i className="icon icon-alert gx-text-white" /> News</Link>
                    </Menu.Item>
                    <Menu.Item key="Servrs">
                        <Link to="/GamePanel/Servers"><i className="icon icon-widgets gx-text-white" />Servers</Link>
                    </Menu.Item>
                    <Menu.Item key="Billing">
                        <Link to="/GamePanel/Billing"><i className="icon icon-pricing-table gx-text-white" />Billing</Link>
                    </Menu.Item>
                    <Menu.Item key="Support">
                        <Link to="/GamePanel/Support"><i className="icon icon-chat-bubble gx-text-white" />Support</Link>
                    </Menu.Item>
                    <Menu.Item key="Logs">
                        <Link to="/GamePanel/Logs"><i className="icon icon-plain-list-divider gx-text-white" />Activity Logs</Link>
                    </Menu.Item>
                </Menu>

                <Switch>
                    <Redirect exact from={`${match.url}/GamePanel`} to={`${match.url}/GamePanel/News`} />
                    <Route path={`${match.url}/GamePanel/Servers`} component={asyncComponent(() => import('./Servers'))} />
                </Switch>
            </Col >
        );
    }
}

const mapStateToProps = state => {
    return {
        isAuthenticated: state.auth.token !== null
    };
};

导出默认的connect（mapStateToProps）（服务器）;

但是我只能看到布局，里面什么也看不到。我认为match const有问题，但我不知道如何解决。

Answer 1

在仪表板组件而不是服务器上进行重定向

这是例子

<InputText  @bind-Value="@TextProperty"  autofocus="@(MyModel.isAutoFocus)"  />

并从服务器组件中删除重定向

反应开关常量

1 个答案: