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中更改的代码

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

2 个答案: