Как передать реквизит через Route компоненту в React

Question

У меня есть компонент заголовка с некоторыми ссылками, когда после нажатия на ссылку загружается тестовая страница, я хочу передать ей реквизит (значение будет получено из состояния на странице заголовка). Цель состоит в том, чтобы тестовая страница автоматически обновлялась при обновлении состояния страницы заголовка.

Приложение. js:

class App extends Component {    
  render() {
    return (
      <div>
        <Header />
        <div>        
            <Route exact path="/test" render={(props) => <Test {...props} myprop={"abc"} /> } />
        </div>
      </div>
    )
  }
}

Заголовок. js:

class Header extends Component {
  render() {
    return (
      <div>
          <Link to="/test">
            Test Page
          </Link>
      </div>
    )
  }
}

Я знаю, что вы можете легко пропустить реквизит с маршрута в соответствии с моим кодом выше ie. myprop будет доступно на тестовой странице, но я хочу как-то динамически установить myprop из заголовка (может быть, Link - это неправильный механизм?), чтобы он знал об изменениях и делал refre sh автоматически - это возможно?

Answer 1

Вы можете удерживать опору в состоянии вашего компонента приложения, а затем передавать ее как в заголовок, так и в тестовый реквизит. И Заголовок также получает функцию setState, чтобы иметь возможность изменять ее. Вот как я это себе представляю:

function App(){    
  let [someProp, setSomeProp] = useState();
  render() {
    return (
      <div>
        <Header prop={someProp} setProp={setSomeProp}/>
        <div>        
            <Route exact path="/test" render={(props) => <Test {...props} myprop={someProp} /> } />
        </div>
      </div>
    )
  }
}

Надеюсь, это сработает для вас. Использование функциональных компонентов вместо компонентов класса стало более популярным с момента добавления хуков к функциональным компонентам в прошлом году.