Второй и последующий Route в Reaction-router-dom не отображается?

Question

Я работал с response-router-dom v4, и я пытаюсь создать центральную конфигурацию для маршрутов с обходным решением.

Это мои маршруты.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.Но он всегда отображает маршрут First, когда я щелкаю ссылку на панели мониторинга, так как это первый оператор после переключения.Я искал в Интернете и много думал об этом, но не смог найти никакого решения.Я не знаю, в чем здесь проблема.

Вот изображение прорисованных маршрутов: Первая картинка

Вторая картинка

Answer 1

У вас есть несколько <Switch> элементов в том, что вы пытаетесь сделать.Из документов:

При визуализации <Switch> будет отображаться только первый дочерний элемент, соответствующий текущему местоположению.

Документы здесь

Снятие всех переключателей, кроме упаковщика, должно работать.Однако, могу ли я предложить более чистый подход:

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 будет содержаться только в реальных маршрутах, при этом импортируя компоненты, которые вы хотите использовать.