Javascript 将历史道具传递给封装在父组件中的动态创建路由

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

请参阅下面的代码片段

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;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“./Loader”导入加载程序；
从“./RootComponent”导入RootComponent；
从“/关于”导入关于；
从“./Contact”导入联系人；
类应用程序扩展组件{
状态={
装载机状态：错误，
炸药：空
}
组件willmount（）{
这是我的国家({
装载机状态：对
})
}
componentDidMount（）{
let routes=（）=>{
让accessedRoutes=[{path:'about'，component:（）=>}，{path:'contact'，component:（）=>}].map（o=>{
返回(
)
})
返回访问路径
}
设置超时（（）=>{
让输出=this.createRoutes（路由）
这是我的国家({
炸药：产量，
装载机状态：错误
})
}, 4000)
}
createRoutes=（路由）=>{
返回(
{routes}
)
}
render（）{
返回(
{
这个，州，装载机状态？
:
{这个.州.炸药}
}
)
}
}
导出默认应用程序；

//关于.js

import React from 'react';

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

export default about

从“React”导入React；
const about=（道具）=>{
log（'props in about'，props）//提供空对象
返回(
关于
)
}
导出默认值关于

将accessedRoutes的结构更改为[{path:'about'，component:about}]。

---

现在，您可以访问为我工作的路由器道具。感谢您的回复：），但原因是什么呢？原因是当route触发它调用的任何组件时，您正在向route传递一个匿名函数。该组件提供了带有路由道具的组件函数，而您并没有以自己的方式接收或传递该组件，您也可以这样做。[{path:'about'，component:（route_props）=>}。