将自定义道具传递到react-router v4中的路由器组件

MonsterKK · 05月28日

我正在使用React Router创建一个多页面应用程序。我的主要组件是<App/>,它呈现了所有到子组件的路由。我正在尝试通过路线传递道具,根据我所做的一些研究,子组件利用最常见的方式来挖掘传递下来的道具是通过this.props.route它们继承对象。但是,这个对象对我来说是未定义的。render()子组件的函数上,我console.log(this.props)和我返回了一个看起来像这样的对象

{match: Object, location: Object, history: Object, staticContext: undefined}

看起来根本不像我期望的道具。这是我的详细代码。

父组件(我试图在所有子组件中将“ hi”一词作为“ test”的道具传递下来):

import { BrowserRouter as Router, HashRouter, Route, Switch } from 'react-router-dom';
import Link from 'react-router';
import React from 'react';

import Home from './Home.jsx';
import Nav from './Nav.jsx';
import Progress from './Progress.jsx';
import Test from './Test.jsx';



export default class App extends React.Component {

  constructor() {
    super();

    this._fetchPuzzle = this._fetchPuzzle.bind(this);
  }

  render() {
    return (
      <Router>
        <div>
          <Nav />
          <Switch>
            <Route path="/" exact test="hi" component={Home} />
            <Route path="/progress" test="hi" component={Progress} />             
            <Route path="/test" test="hi" component={Test} />
            <Route render={() => <p>Page not found!</p>} />
          </Switch>
        </div>
      </Router>
    );
  }
}

儿童:

import React from 'react';
const CodeMirror = require('react-codemirror');
import { Link } from 'react-router-dom';

require('codemirror/mode/javascript/javascript')

require('codemirror/mode/xml/xml');
require('codemirror/mode/markdown/markdown');

export default class Home extends React.Component {

  constructor(props) {
    super(props);

    console.log(props)

  }

  render() {
    const options = {
      lineNumbers: true,  
      theme: 'abcdef'    
      // mode: this.state.mode
    };
    console.log(this.props)

    return (
      <div>
        <h1>First page bro</h1>        
        <CodeMirror value='code lol' onChange={()=>'do something'} options={options} />
      </div>);
  }
}

我对React很陌生,所以如果我遗漏了一些明显的东西,我深表歉意。谢谢!

回答(1)
时间
番长猴子
1 · 2020-05-28 15:28:11

您可以通过将renderprop 传递给组件来将prop 传递给组件Route,从而内联组件定义。根据DOCS:

这样可以方便地进行内联渲染和包装,而无需进行上述不必要的重新安装。与其使用componentprop 为您创建一个新的React元素,还可以传入一个在location匹配时调用的函数渲染道具接收与组件渲染道具相同的所有路线道具

这样您就可以将prop传递给组件

 <Route path="/" exact render={(props) => (<Home test="hi" {...props}/>)} />

然后您可以像访问它

this.props.test 

在你的Home组件中

PS还请确保您正在传递,{...props}这样默认路由器道具location, history, match etc也将传递给Home组件,否则唯一传递给组件的道具就是test

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序