在Reaction-路由器v4中将自定义道具传递给路由器组件

Question

在Reaction-路由器v4中将自定义道具传递给路由器组件

我正在使用Reaction路由器创建一个多页面应用程序。我的主要组成部分是<App/>它呈现到子组件的所有路由。我试图通过路线传递道具，并根据一些研究我这样做了，子组件最常用的方式是通过this.props.route对象，它们继承。但是，对于我来说，这个对象是未定义的。我的render()函数在子组件中，iconsole.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>);
  }}

我对此反应很新，所以如果我错过了一些显而易见的事情，我很抱歉。谢谢!

Answer 1

可以将道具传递给组件，方法是使用render道具Route从而内联您的组件定义。根据指定经营系统：这允许方便的内联呈现和包装，而不需要上述不想要的重新安装。component属性时，可以传入要调用的函数。location火柴。呈现道具接收所有与组件呈现道具相同的路由道具。所以您可以将道具传递给组件，如&nbsp;<Route&nbsp;path="/"&nbsp;exact&nbsp;render={(props)&nbsp;=>&nbsp;(<Home&nbsp;test="hi"&nbsp;{...props}/>)}&nbsp;/>然后你就可以像this.props.test在你的Home元件P.S.也要确保你是经过{...props}这样，默认的路由器道具就像location, history, match etc也被传递到Home组件，否则，传递给它的唯一支柱是test.

Answer 2

我不认为这是一个快速修复，如果您将其传递给组件，路由器道具将被传递。render()..我漏掉了答案中的那部分。但是，我更新了它，使其包含相同的

Answer 3

您应该将props参数添加到传入的函数中，并将其与{.props}一起在组件‘home’中使用，否则您将失去标准的支持-Reaction路由器V4传入