Question

我必须像反应3那样在反应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;

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

Answer 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

react js 4中的嵌套路由

1 个答案: