react js 4中的嵌套路由[重复]答案

【问题标题】：nested Route in react js 4 [duplicate]react js 4中的嵌套路由[重复]
【发布时间】：2019-01-20 09:35:43
【问题描述】：

我必须像 react 3 一样在 react 4 中制作嵌套路由器以下是我的 App.js 代码

import React, { Component } from 'react';
import './App.css';

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import history from './history';

import Home from './components/root/home/Home';
import Root from './components/root/Root';
import Headers from './header/Header';
import Footer from './footer/Footer';

class App extends Component {
  render() {
    return (
      <div className="app-component">
        <Router history={history}>
          <Route exact path={"/"} component={Root}>
            <Route path={"/index"} component={Home} />
          </Route>
        </Router>
       <Headers />
        {this.props.children}
       <Footer />
      </div>
    );
  }
}


export default App;

代码有什么问题我必须像 React 3 一样在 React 4 中制作嵌套路由器

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

不要将Route 组件嵌套在另一个Route 组件中，而是将嵌套的Route 添加到要渲染的组件中。
例如：

 class App extends Component {
      render() {
        return (
          <div className="app-component">
            <Router>
              // using path="/" will throw an error
              <Route path="/root" component={Root} />
            </Router>       
           <Headers />
            {this.props.children} 
           <Footer />
          </div>
        );
      }
    }

function Root({match}) {
  return (
    <div>
      <h2>Root</h2>
      <ul>
        <li>
          <Link to={`${match.url}/home`}>Home</Link>
        </li>
      </ul>
      <Route path={`${match.path}/:nestedComponent`} component={Home} />
    </div>
  );
}

有关嵌套路由的更多信息，您应该通过这个Source

【讨论】：