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

Posted 2023-02-23

【中文标题】在 react-router v4 中将自定义道具传递给路由器组件

【英文标题】：Passing custom props to router component in react-router v4

【发布时间】：2019-06-08 10:35:34

【问题描述】：

我正在使用 React Router 创建一个多页面应用程序。我的主要组件是<App/>，它将所有路由呈现到子组件。我正在尝试通过路由传递道具，并且基于我所做的一些research，子组件利用传递的道具的最常见方式是通过它们继承的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 很陌生，所以如果我遗漏了一些明显的东西，我深表歉意。 谢谢！

【问题讨论】：

您想从route 对象中提取什么信息？在 react-router v4 中，您应该能够从 match 或 location 检索相同的信息

@AnthonyKong 我正在尝试提取“测试”属性。<Route path="/" exact test="hi" component=Home />。我的印象是，渲染的<Home/> 组件可以访问持有该值的对象。我查看了 match 和 location 对象，但没有找到我的道具。

match.params.test 怎么样？

不知道为什么该值不存在，但替代方法是，像这样传递该值：<Route path="/test" render=(props) => <Test ...props test="hi"/> /> 并通过this.props.test 访问它。

@MayankShukla 谢谢。这交付了。奇怪的是，使用其他技术没有显示该值。

【参考方案1】：

您可以通过使用render 向Route 传递道具，从而内联您的组件定义。根据the DOCS:

这允许方便的内联渲染和包装，而无需 上面解释了不希望的重新安装。而不是拥有一个新的 React 使用 component 属性为你创建的元素，你可以传入一个 location 匹配时调用的函数。渲染道具 接收所有与组件渲染道具相同的路由道具

所以你可以像这样将 prop 传递给组件

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

然后你就可以访问它了

this.props.test 

在您的 Home 组件中

P.S. 还要确保您传递 ...props 以便 像location, history, match etc 这样的默认路由器道具也被传递给Home 组件 否则，唯一传递给它的道具是test。

【讨论】：

这很有效，谢谢。奇怪的是我在上面的问题中尝试的方法不起作用。

是的，在回答这个问题之前，我已经在本地设置中完成了该分析，花了我一些时间

这是推荐的方法吗？它看起来像一个快速修复？

你应该将 props 参数添加到你传入的函数中，并在组件 'Home' 中使用 ...props 否则你会丢失标准的 props react router v4 传入跨度>

@speedDeveloper，我不认为它是一个快速修复，如果你将它传递给render() 中的组件，路由器道具将被传递。我错过了答案中的那部分。但是我更新了它以包含相同的