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>
      </>
    )
  }
}

它不起作用。单击时，我转到add-new-question url，但组件AddNewQuestionPage无法呈现。如果将Route不在AddQuestions组件中，而在App组件中，则可以使用它。它是整个应用程序的主要组成部分，并且使用Switch，还设置了其他路由。

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

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

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

Answer 1

对于传递给组件的问题，您应该使用this关键字。

像这样


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

Answer 2

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

始终将所有内容作为父项。
通过单击某种组件（按钮...）来更改路径的最好方法是标记您自己

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

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

2 个答案: