反应路由器并将道具传递给其他组件

Question

我在一个组件中有一个按钮，单击我想转到另一个组件并将状态传递给该组件。

是这样的：

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import AddNewQuestionPage from 'AddNewQuestionPage';

class AddQuestions extends Component {
  state = {
    questions: []
  };

  routeChange = () => {
    let path = `/admin/add-new-question`;
    this.props.history.push(path);
  }

  render() {
    return (
      <>
       <button onClick={this.routeChange}>
          Add new question
       </button>
       <BrowserRouter>
        <Route exact={true} path='/admin/add-new-question' component={AddNewQuestionPage}/>
       </BrowserRouter>
      </>
    )
  }
}

但它不起作用。单击“我去添加新问题url”，但组件AddNewQuestionPage不会呈现。若我不把路线放在AddQuestions组件中，而是放在应用程序组件中，它就可以工作。它是整个应用程序的主要组件，使用Switch，还设置了其他路由。

但是，如果状态问题是从应用程序组件呈现的，我不知道如何将其传递给AddNewQuestionPage组件？我不能只做：

<Route path='/admin/add-new-question' render={(props) => <AddNewQuestionPage {...props} questions={questions} />

因为它不知道什么是“问题”。对我来说，将状态提升到主要组件似乎不是一个好的解决方案。我在搜索，但我找不到怎么做。。。

Answer 1

使用react router dom的最佳方法是：

1. 始终将make作为所有组件的父组件

请查看本指南：https://reacttraining.com/react-router/web/guides/quick-start

Answer 2

您应该在传递给组件的问题上使用this关键字。

像这样的

<Route path='/admin/add-new-question' render={(props) => <AddNewQuestionPage {...props} questions={this.state.questions} />