在React Router的最新版本中，如何在首页“ /”中嵌套路由

Question

How to nest routes in the homepage "/" ?

let's say you have a 2 page site, the HOME page with just a header and paragraph and the ABOUT page have 2 more nested routes, here's the about page.

ABOUT

import React from "react";
import { Link, Route, Switch, Redirect } from "react-router-dom";
/* Inner Pages */
import Technology from "./innerpages/Technology";
import Business from "./innerpages/Business";


const About = props => {
  return (
    <div className="container">
        <div className="tab-navs">
            <Link to={`${props.match.url}/business`}>Business</Link>
            <Link to={`${props.match.url}/economics`}>Economics</Link>
        </div>
          <Switch>
            <Route
              exact
              path={`${props.match.path}/business`}
              render={() => <Business />}
            />
            <Route
              path={`${props.match.path}/economics`}
              render={() => <Economics />}
            />
          </Switch>
    </div>
  );
};

export default About;

HOME

import React from "react";

const Home = props => {
  return (
    <div className="container">
        <h1>Home</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
    </div>
  );
};

export default Home;

Here's the index.js

INDEX

import React,{Component} from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Logo from "./components/Logo";
import Navigation from "./components/Navigation";

/* Pages */
import Home from "./pages/Home";
import About from "./pages/About";

import "./stylesheet/main.scss";

class App extends Component {
  constructor(props){
     super(props);
  }
 render(){
  return (
    <Router>
      <div className="App">
        <header>
          <Logo />
          <Navigation />
        </header>
        <main>
          <Switch>
            <Route path="/" exact render={props => <Home />} />
            <Route path="/about" component={About} />
          </Switch>
        </main>
      </div>
    </Router>
  );
}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Now this works fine, but what if the HOMEPAGE with a url of "/" has the 2 nested routes? i tried switching their content and it doesn't work

Answer 1

If Homepage has to have nested Routes, what you would do is to remove the exact keyword from its path and reorder your Routes within Switch component

  <Switch>
        <Route path="/about" component={About} />
        <Route path="/services" component={Services} />
        <Route path="/" render={props => <Home {...props}/>} />
  </Switch>