不能呈现出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>

我已设置链接：

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>
);

}

据此，该链接应该可用，但是当我尝试单击页首横幅链接时，它不会呈现Websiteleaderboard组件。但是，当我单击仪表板链接时，它始终呈现“第一条路线”，因为它是switch语句之后的第一条。 我在网上搜索了很多东西，但是却找不到任何解决方案。我不知道这是什么问题。

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

第二张照片

Answer 1

您要执行的操作中有多个<Switch>元素。从文档中：

  

渲染<Switch>时，它将仅渲染与当前位置匹配的第一个孩子。

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仅包含在实际路径中。