javascript - 将历史记录属性传递给包装在父组件中的动态创建的路由

Question

我如何将历史记录传递给动态创建的路线 用另一个组件包裹

请参阅下面的代码片段

import React, {Component} from 'react';
import {BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Loader from './Loader';
import RootComponent from './RootComponent';
import About from './About';
import Contact from './Contact';

class App extends Component{
  state = {
    loaderStatus: false,
    dynamicRoutes: null
  }

  componentWillMount(){
    this.setState({
      loaderStatus: true
    })
  }

  componentDidMount(){
    let routes = () => {
      let accessedRoutes = [{path:'about', component: () => <About />},{path:'contact', component: () => <Contact />}].map(o => {
        return (
          <Route
            exact={true}
            path={o.path}
            component={o.component}
          >
          </Route>
        )
      })
      return accessedRoutes
    }

    setTimeout(() => {
      let output = this.createRoutes(routes)
      this.setState({
        dynamicRoutes: output,
        loaderStatus: false
      })
    }, 4000)
  }

  createRoutes = (routes) => {
    return (
      <RootComponent>
        <Switch>
          {routes}
        </Switch>
      </RootComponent>
    )
  }


  render(){
    return(
    <Fragment>
    {
      this.state.loaderStatus ?
      <Loader />
      :
      <Router>
        {this.state.dynamicRoutes}
      </Router>
    }
    </Fragment>
    )
  }
}

export default App;

//About.js

import React from 'react';

const about = (props) => {
  console.log('props in about', props) // giving empty object
  return (
    <div>About</div>
  )
}

export default about

Answer 1

将accessedRoutes的结构更改为[{path:'about', component:About}]。 现在您可以访问路由器 Prop