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

Question

I have a button in one component and on click I want to go to other component and pass to this component the state.

It's something like this:

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

And it doesn't work. On click I go to add-new-question url but the component AddNewQuestionPage doesn't render. It works if I put Route not in AddQuestions component, but in App component. It's the main component of the whole app and using Switch, there are set also other routes.

However I don't know how I can pass the state questions to AddNewQuestionPage component if it's rendered from App component? I can't just do:

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

because it doesn't know what is "questions". Lifting the state up to the main component doesn't seem a good solution for me. I was searching and I can't find how to do it...

Answer 1

You should use the this keyword on the question you're passing to the component.

So something like this

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

Answer 2

The best way to use react-router dom is:

1. Always make as a parent component for all.
2. The best way to change the path by clicking on a sort of component (button...) is You label

Please check this guide out: https://reacttraining.com/react-router/web/guides/quick-start