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

Question

我正在使用React Router创建一个多页应用程序。我的主要组件是<App/>，它将所有路由呈现给子组件。我正在尝试通过路径传递道具，根据我做过的一些research，子组件访问传递的道具最常见的方式是通过它们继承的this.props.route对象。但是，这个对象对我来说是未定义的。在子组件中的render()函数上，I console.log(this.props)和am返回一个如下所示的对象

{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

您可以通过使用Route的render属性将属性传递给组件，从而内联您的组件定义。根据的说法

这允许方便的内联渲染和包装，而不需要使用component属性为您创建一个新的React元素的不必要的重新挂载解释above.Instead，您可以在location匹配时传入一个要调用的函数。渲染属性接收所有与组件渲染属性相同的路径属性

因此，您可以将属性传递给组件，如

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

然后你可以像这样访问它

this.props.test 

在Home组件中

P.S.还确保您传递的是{...props}，以便像location, history, match etc这样的默认路由器属性也会传递给Home组件，否则传递给它的唯一属性就是test。