在 React-router 版本 5.1.2 中将 Prop 传递给 React Router 内的组件

Question

这是专门针对 React-router 版本 5 的。

我试图获取从 React-router 传递到 LandingPage 组件的 prop。但是 LandingPage 组件似乎没有 prop 值。我看到的唯一道具是比赛、地点、历史。

我的代码相当简单。请让我知道我在这里缺少什么？

import React from 'react';
import ReactDOM from 'react-dom';
import landingPageBkg from "../../../public/assets/justice.jpg";



class LandingPage extends React.Component {

    componentDidMount() {
        setTimeout(()=>{
            this.props.history.push('/pagenotfound');
        },3000)
    }
 
  render() {
      console.log('this.props',this.props);
    return (
      <div className="landingPageImg">
        <p> {this.props.text} </p>
        <img src={landingPageBkg} className="landingPageImg"/>
      </div>
    );
  }
}

export default LandingPage;



import React from 'react';
import { BrowserRouter, Route, link, NavLink, Switch } from 'react-router-dom';
import LandingPage from '../screens/LandingPage/LandingPage.js'
import PageNotFound from '../screens/PageNotFound/PageNotFound.js'



 const Approutes=(props)=>{
    
    const backgroundImgLoc='../../public/assets/justice.jpg'
    return (
        <BrowserRouter>
            <div>
                <Switch>
                    <Route path="/" component={LandingPage} exact={true} 
                    render={props => <LandingPage text={backgroundImgLoc} {...props} />}
               
                    />
                    <Route path="/pagenotfound" component={PageNotFound}/>
                </Switch>
            </div>
        </BrowserRouter>
    );
}

export default Approutes

import React, { Component } from 'react';
class PageNotFound extends Component {
render() {
   return (
     <div>
      <p style={{color: 'white'}}>PAGE NOT FOUND</p>
      </div>
    );
  }
}
export default PageNotFound;



import React from 'react';
import ReactDOM from 'react-dom';
import 'normalize.css/normalize.css';
import '../styles/styles.css'
import Approutes from '../src/routers/Approutes'

ReactDOM.render(<Approutes hi="hiii"/>,document.getElementById('root'));

Answer 1

component={LandingPage}从路线中删除

 <Route path="/"    
   exact={true} 
   render={props => <LandingPage text={backgroundImgLoc} 
   {...props} />} />