将自定义道具传递给react-router v4中的路由器组件 [英] Passing custom props to router component in react-router v4

问题描述

我正在使用React Router创建一个多页面应用程序。我的主要组件是< App /> ，它将所有路由呈现给子组件。我正试图通过路线传递道具，并基于一些研究我是的，子组件最常用的方法是通过它们继承的 this.props.route 对象。但是，这个对象对我来说是不确定的。在子组件中的 render（）函数中，我 console.log（this.props）并返回一个看起来像这样的对象

I'm using React Router to create a multi page app. My main component is <App/> and it renders all of the routing to to child components. I'm trying to pass props via the route, and based on some research I did, the most common way for child components to tap into props passed down is via the this.props.route object that they inherit. However, this object is undefined for me. On my render() function in the child component, I console.log(this.props) and am return an object that looks like this

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

看起来不像我期望的道具。这是我的详细代码。

Doesn't look like the props I expected at all. Here is my code in detail.

父组件（我试图在我的所有子组件中将hi这个词传递给名为test的道具）：

Parent Component (I'm trying to pass the word "hi" down as a prop called "test" in all of my child components):

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很新，所以我很抱歉我错过了一些明显的东西。
谢谢！

I'm pretty new to React so my apologies if I'm missing something obvious. Thanks!

推荐答案

您可以通过使用渲染将道具传递给组件支持 Route ，从而内联组件定义。根据 DOCS：

You can pass props to the component by making use of the render prop to the Route and thus inlining your component definition. According to the DOCS:

这允许方便的内联呈现和包装，而不需要上面解释的
不希望的重新安装。而不是有一个新的React
使用组件 prop为您创建的元素，您可以传入
函数，以便在位置匹配。渲染道具
接收与组件渲染道具相同的所有路径道具

This allows for convenient inline rendering and wrapping without the undesired remounting explained above.Instead of having a new React element created for you using the component prop, you can pass in a function to be called when the location matches. The render prop receives all the same route props as the component render prop

所以你可以将道具传递到组件之类的

So you can pass the prop to component like

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

然后你就可以像

this.props.test 

在<$ c $中c>主页组件

PS 同时确保传递 {... props} 以便
默认路由器道具如位置，历史记录，匹配​​等也正在获得传递给 Home 组件
，否则唯一传递给它的道具是 test 。

P.S. Also make sure that you are passing {...props} so that the default router props like location, history, match etc are also getting passed on to the Home component otherwise the only prop that is getting passed down to it is test.

这篇关于将自定义道具传递给react-router v4中的路由器组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！