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

Question

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

我正在尝试获取从 React-router 传递给 LandingPage 组件的道具。但是 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} />} />

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

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

Passing Prop to a Component inside React Router in React-router version 5.1.2

reactjs

react-router

react-router-v4