我正在使用ReactRouter创建一个多页面应用程序。我的主要组件是<App/>,它呈现了所有到子组件的路由。我正在尝试通过路线传递道具,根据我所做的一些研究,子组件利用最常见的方式来挖掘传递下来的道具是通过this.props.route它们继承的对象。但是,这个对象对我来说是未定义的。在render()子组件的函数上,我console.log(this.props)和我返回了一个看起来像这样的对象
<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> ); } }
Child:
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很陌生,所以如果我遗漏了一些明显的东西,我深表歉意。谢谢!
您可以通过将renderprop 传递给组件来将prop 传递给组件Route,从而内联组件定义。根据 DOCS:
render
Route
这样就可以方便地进行内联渲染和包装,而无需进行上述不必要的重新安装。与其使用componentprop 为您创建新的React元素,还可以传递一个在location匹配时调用的函数。渲染道具接收与组件渲染道具相同的所有路线道具
component
location
这样您就可以将prop传递给组件
<Route path="/" exact render={(props) => (<Home test="hi" {...props}/>)} />
然后您可以像访问它
this.props.test
在你的Home组件中
Home
PS 还请确保您正在传递,{...props}这样默认路由器道具location,history,matchetc也将传递给该Home组件,否则唯一传递给它的道具就是test。
{...props}
location,history,matchetc
test