相关疑难解决方法(0)

我想在我的公共布局中渲染我的一些路线,以及我的私人布局中的其他一些路线,是否有一个干净的方法来做到这一点？

示例显然不起作用,但我希望大致解释我正在寻找的内容:

<Router>

  <PublicLayout>
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/about" component={AboutPage} />
    </Switch>
  </PublicLayout>

  <PrivateLayout>
    <Switch>
      <Route exact path="/profile" component={ProfilePage} />
      <Route exact path="/dashboard" component={DashboardPage} />
    </Switch>
  </PrivateLayout>

</Router>

我想要切换某些路由的布局,如何使用新的路由器做到这一点？

嵌套路由不再有效,并给我这个错误:

You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

编辑:布局包装整个路径组也意味着只要您保留在同一个私有/公共路由组中,这些布局只会呈现一次.如果您的布局必须从您的服务器获取某些内容,这是一个大问题,因为如果您使用布局包装每个页面,那么每次更改都会发生这种情况.

我的应用程序有问题。在我的标题中，我有Twitter，Youtube，Instgram，如果我单击其中之一，它将显示该组件的页面。例如，如果我单击instagram，它将加载Instagram组件并将页面更改为Instagram。但是在我的应用程序中，单击其中一个后，页面不会更改，也不会加载组件，但url会更改。这是我的代码：

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Row, Col, Card, Layout, Spin } from "antd";
import "antd/dist/antd.css";
import "./index.css";
import cubejs from "@cubejs-client/core";
import { QueryRenderer } from "@cubejs-client/react";
import { Line, Bar, Pie } from "react-chartjs-2";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Facebook from "./Facebook";
import Youtube from "./Youtube";
import Instagram from "./Instagram";
import Twitter from "./Twitter";
import moment from "moment";

const AppLayout = ({ children }) => …