Передача Prop компоненту внутри React Router в React-router версии 5.1.2

Question

ЭТО МОЖЕТ СМОТРЕТЬ, КАК ПРОБЛЕМА ДУБЛИКАТА, НО НЕТ АДРЕСОВ АКТИВНОГО РЕЙТОРА версии 5.

Я пытаюсь получить реквизит, переданный компоненту LandingPage от React-router. Однако компонент LandingPage, похоже, не имеет значения проп. Единственное, что я вижу, это совпадение, местоположение, история.

Мой код довольно прост. Пожалуйста, дайте мне знать, что мне здесь не хватает?

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} />} />

Answer 2

Изменить это

<BrowserRouter>
      <div>
        <Switch>
          <Route
            path="/"
            exact={true}
            render={props => <LandingPage text={backgroundImgLoc} {...props} />}
          />
          <Route path="/pagenotfound" component={PageNotFound} />
        </Switch>
      </div>
    </BrowserRouter>

Вот ваш измененный код в песочнице https://codesandbox.io/s/gracious-sound-ewbdt