web-dev-qa-db-ja.com

react-router v4のルーターコンポーネントにカスタムプロパティを渡す

Reactルーターを使用してマルチページアプリを作成しています。メインコンポーネントは_<App/>_で、すべてのルーティングを子コンポーネントにレンダリングします。小道具を渡そうとしています。ルートを介して research に基づいて、子コンポーネントが渡された小道具を利用する最も一般的な方法は、継承する_this.props.route_オブジェクトを使用することですが、このオブジェクトは未定義。子コンポーネントのrender()関数では、console.log(this.props)であり、次のようなオブジェクトを返します。

_{match: Object, location: Object, history: Object, staticContext: undefined}
_

私が期待していた小道具のように見えません。これが私のコードの詳細です。

親コンポーネント（すべての子コンポーネントで「テスト」と呼ばれる小道具として「こんにちは」という言葉を伝えようとしています）：

_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が初めてなので、明らかな何かを見逃しているなら謝罪します。ありがとう！

javascriptreactjsreact-routerreact-router-v4
15
Mark Romano

render prop to Routeを使用してコンポーネント定義をインライン化することにより、コンポーネントにpropを渡すことができます。 DOCS：

これにより、上記の不要な再マウントなしで便利なインラインレンダリングとラッピングが可能になります。component propを使用して新しいReact要素を作成する代わりに、呼び出される関数を渡すことができます。 locationが一致します。レンダープロップは、コンポーネントレンダープロップと同じルートプロップをすべて受け取ります。

したがって、次のようなコンポーネントにプロップを渡すことができます

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

そして、次のようにアクセスできます

_this.props.test 
_

Homeコンポーネントで

PS_{...props}_のようなデフォルトのルーターの小道具もに渡されるように、必ず_location, history, match etc_を渡してくださいHomeコンポーネントそれ以外の場合、渡される唯一のプロップはtestです。

27
Shubham Khatri