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

我正在使用React Router来创build一个多页面的应用程序。 我的主要组件是<App/> ，它呈现所有的路由到子组件。 我试图通过道路传递道具，根据我做的一些研究 ，子元素最常用的方法是通过它inheritance的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，我很新，所以如果我错过了一些明显的东西，我很抱歉。 谢谢！

Answer 1

您可以通过使用render道具到Route并因此内联组件定义来将道具传递给组件。 根据DOCS：

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

所以你可以把这个道具传给像这样的组件

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

然后你可以像访问它

 this.props.test 

在你的Home组件

PS还要确保你通过{...props}以便像location, history, match etc默认路由器道具也传递到Home组件，否则传递给它的唯一道具是test 。