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

【问题标题】：Passing Prop to a Component inside React Router in React-router version 5.1.2在 React-router 版本 5.1.2 中将 Prop 传递给 React Router 内的组件
【发布时间】：2020-01-25 12:31:53
【问题描述】：

这专门用于 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'));

【问题讨论】：

你能在沙盒中分享你的代码吗？
我已经更新了代码。这就是我在沙盒中的全部内容。没有什么花哨。你能找出谜题中缺少的部分吗？

标签： reactjs react-router react-router-v4

【解决方案1】：

从路由中删除 component={LandingPage}

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

【讨论】：

非常感谢。有效。但是路由路径属性不是需要对应的组件吗？
你用过render。
您可以传入一个在位置匹配时调用的函数，而不是使用组件属性为您创建一个新的 React 元素。 render prop 函数可以访问与组件 render prop 相同的所有路由 props（匹配、位置和历史）。reacttraining.com/react-router/web/api/Route/render-func

【解决方案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

【讨论】：