在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>);
}}我對此反應很新，所以如果我錯過了一些顯而易見的事情，我很抱歉。謝謝!
在Reaction-路由器v4中將自定義道具傳遞給路由器組件
溫溫醬
2019-07-08 12:50:09
