Question

我对ReactJS还是很陌生，我确实陷入了路由过程。路由上有n种方法，我真的很困惑，我应该在哪里放置链接和路由，是否需要在其中安装组件，如果一旦我能够获得数据，那么路由高效在动态环境中做到的方式？我已经有一个蚂蚁设计模板！

Index.js

    import React from "react";
    import ReactDOM from "react-dom";
    import "antd/dist/antd.css";
    import "./index.css";
    import { Router, Route, Link } from "react-router";
    import { Layout, Menu, Breadcrumb, Icon } from "antd";
    import Example from "./Components/allSubCount";
    const { SubMenu } = Menu;
    const { Header, Content, Sider } = Layout;

    ReactDOM.render(
        <Layout>
         <Header className="header">
           <div className="logo" />
             <Menu
              theme="dark"
              mode="horizontal"
              defaultSelectedKeys={["2"]}
              style={{ lineHeight: "64px" }}
             />
          </Header>
             <Layout>
                 <Sider width={200} style={{ background: "#fff" }}>
                  <Menu
                   mode="inline"
                   defaultSelectedKeys={["1"]}
                   defaultOpenKeys={["sub1"]}
                   style={{ height: "100%", borderRight: 0 }}
                 >
                      <SubMenu
                       key="sub1"
                       title={
                       <span>
                            <Icon type="user" />
                             Dashboard
                       </span>
                       }
                  >
                                <Menu.Item key="1">Sub Graph</Menu.Item>
                                <Menu.Item key="2">Int Graph</Menu.Item>
                                <Menu.Item key="3">PO Graph</Menu.Item>
                      </SubMenu>

                             <Menu.Item key="4">
                                <span>
                                     <Icon type="user" />
                                      Marketers
                                </span>
                             </Menu.Item>
                             <Menu.Item key="5">
                                 <span>
                                      <Icon type="user" />
                                      Consultants
                                 </span>
                             </Menu.Item>
                </Menu>
             </Sider>
          <Layout style={{ padding: "0 24px 24px" }}>
                   <Content
                    style={{
                    background: "#fff",
                    padding: 24,
                    margin: 24,
                    minHeight: 280
                    }}
                   >
                  <Example />
                  </Content>
            </Layout>
          </Layout>
       </Layout>,
       document.getElementById("container")
       );

Answer 1

请参考答案

https://stackoverflow.com/a/56053141/6150566

我在以上答案提供的链接中包含了示例代码。但是，如果您不愿意，则不必使用受保护的路由。但是最好隔离路由和应用布局逻辑。

如何在React JS中使用动态路由在选项卡或导航菜单之间切换？

1 个答案: