react-router-dom 中的第二个和后续路由没有被渲染？

Question

我一直在使用 react-router-dom v4，我正在尝试使用变通方法为路由进行中央配置。

这是我的routes.js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import {
 WebsiteFilter,
 WebsiteLeaderBoard,
 WebsiteGraph,
 WebsiteQues
}
 from "./components";


import { DashboardApp ,LeaderBoardApp} from "./containers";
    
const dashboardContainer = (id) => (
 <DashboardApp key={id}>
  <Switch>
   <Route exact path="/dashboard" render={(props)  => (
   <>
    <WebsiteFilter />
    <WebsiteGraph />
    <WebsiteQues />
   </>
   )}
   />
  </Switch>

 </DashboardApp>
);

const leaderBoardContainer = (id) => (
 <LeaderBoardApp key={id}>
  <Switch>
   <Route exact path="/leaderboard" render={(props) => (
    <>
     <WebsiteLeaderBoard />
    </>
   )} />
  </Switch>
 </LeaderBoardApp>
);


const container =  [ dashboardContainer , leaderBoardContainer ];

const Routes = () => {
 return (
  <BrowserRouter baseName="/">
   <Switch>
    {container.map((pages,id) => (
     pages(id)
    ))}
   </Switch>
  </BrowserRouter>
 );
};

export default Routes;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是我的DashboardApp.js

import React, { Component } from "react";
import { WebsiteHeader ,  WebsiteFooter} from "../components";
import PropTypes from "prop-types";

import classes from "./app.scss";

class DashBoardApp extends Component {

 render() {
  return (
   <div className={classes.app}>
    <WebsiteHeader/>
     <>
      {this.props.children}
     </>
     <WebsiteFooter />
   </div>

  );
 }
}

export default DashBoardApp;

DashBoardApp.propTypes = {
 children :  PropTypes.element,
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是我的LeaderBoardApp.js

import React, { Component } from "react";
import { WebsiteHeader ,  WebsiteFooter} from "../components";
import PropTypes from "prop-types";

import classes from "./app.scss";

class LeaderBoardApp extends Component {

 render() {
  return (
   <div className={classes.app}>
    <WebsiteHeader/>
     <>
      {this.props.children}
     </>
     <WebsiteFooter />
   </div>
  
  );
 }
}

export default LeaderBoardApp;

LeaderBoardApp.propTypes = {
 children :  PropTypes.element,
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我已经设置了我的 Link:

export default function HeaderLink (props) {
const { wrapperClass, dashboardClass } = props;
return (
    <ul className={wrapperClass}>
        <li className={[dashboardClass,classes.active].join(" ") }><Link to ="/dashboard">Dashboard</Link></li>
        <li className={dashboardClass}> <Link to ="/leaderboard">Leaderboard</Link></li>
    </ul>
);

}

据此 link 应该可以工作，但是当我尝试单击排行榜 link 时，它不会呈现 Websiteleaderboard 组件。但是当我单击仪表板 link 时，它总是呈现第一条路线，因为它是 switch 语句之后的第一条路线。上网查了一下，想了很多，也没有找到解决办法。我不知道这里有什么问题。

这是渲染路线的图片：第一张照片

第二张图

Answer 1

您尝试执行的操作包含多个 <Switch> 元素。来自文档：

When a <Switch> is rendered, it will only render the first child that matches the current location.

Docs here

删除包装器以外的所有开关应该可以。但是，我可以建议一个更简洁的方法：

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import {
    WebsiteFilter,
    WebsiteLeaderBoard,
    WebsiteGraph,
    WebsiteQues
}
    from "./components";


import { DashboardApp ,LeaderBoardApp} from "./containers";

const dashboardContainer = () => (
    <DashboardApp>
        <WebsiteFilter />
        <WebsiteGraph />
        <WebsiteQues />
    </DashboardApp>
);

const leaderBoardContainer = () => (
    <LeaderBoardApp>
        <WebsiteLeaderBoard />
    </LeaderBoardApp>
);


const Routes = () => {
    return (
        <BrowserRouter baseName="/">
            <Switch>
                <Route path="/dashboard" component={dashboardContainer} />
                <Route path="/leaderboard" component={leaderBoardContainer} />
            </Switch>
        </BrowserRouter>
    );
};

export default Routes;

通过这样做，您的整个配置都包含在 Routes 中。您甚至可以将组件移出该文件，并让您的 Routes 仅包含在实际路由中，同时导入您要使用的组件。

react-router-dom 中的第二个和后续路由没有被渲染？

Second and subsequent Route in react-router-dom is not being rendered?

reactjs

react-redux

react-router-v4

react-router-dom