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

Question

I have been working with react-router-dom v4 and i am trying to make a central config for the routes with a workaround.
This is my 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>
This is my 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>
This is my 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>
I have set my 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>
);
}
According to this the link should work , but when i try to click the leaderboard link , it doesn't render the Websiteleaderboard component. But it always render the First route when i click the dashboard link as it's the first after switch statement.
I searched online , and thought about it a lot , but couldn't found any solution. I don't know what's the problem here.
Here's the picture of rendered routes:
First pic
Second pic

Answer 1

You have multiple <Switch> elements in what you're trying to do. From the docs:
When a <Switch> is rendered, it will only render the first child that matches the current location.
Docs here
Removing all the switches except the wrapper should work. However, might I suggest a cleaner approach:
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;
By doing this, your entire configuration is contained in the Routes. You could even move the components out of that file, and have your Routes contained to only the actual routes, while importing the components you want to use.