Блог

Главная - Вопросы по программированию - Автоматически ли react-router-dom передает объект истории дочерним компонентам внутри маршрутизатора?

Автоматически ли react-router-dom передает объект истории дочерним компонентам внутри маршрутизатора?

#javascript #reactjs #react-router-dom

Вопрос:

Вероятно, это будет вопрос новичка, но передает ли компонент маршрутизатора объект истории дочерним компонентам автоматически? чтобы продемонстрировать, что у меня есть это

App.js ;

 
const App = () => {
  return (
    <>
      <h1>Hello</h1>
      <Router history={history}>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/another_route" exact component={AnotherRoute} />
        </Switch>
      </Router>
    </>
  );
};

и компоненты » Дом » и «Другой маршрут», использующие функцию «История» для изменения маршрута без явной передачи детям через маршрутизатор.

 
// Home.js

import React from "react";

const Home = (props) => {
  return (
    <>
      <h3> Hello From home </h3>
      <button onClick={() => props.history.push("/another_route")}>
        click here to go another route
      </button>
    </>
  );
};

export default Home;


// AnotherRoute.js

import React from "react";

const AnotherRoute = (props) => {
  return (
    <>
      <h3> Hello From this another Route </h3>
      <button onClick={() => props.history.push("/")}>
        click here to go back
      </button>
    </>
  );
};

export default AnotherRoute;

Все работает просто отлично, но я хотел бы это понять. Я не видел этого в документации явно.

вот кодовое поле, которое я создал для вас, чтобы вы могли поэкспериментировать:

https://codesandbox.io/s/react-router-dom-passes-history-object-to-children-automatically-jj7ih

Спасибо.

Комментарии:

1. он действительно делится историей со своими детьми

2. не могли бы вы поделиться страницей документации или чем-то еще, чтобы я мог это проверить?

3. Я прочитал эту статью, и в ней говорится об обертывании компонента с помощью компонента withRouter. если бы вы прочитали мой вопрос и проверили codesandbox, я не завернул ни один компонент (или не использовал крючок истории использования), и он работает просто отлично!

Ответ №1:

Да, все методы визуализации маршрута будут переданы одним и тем же трем реквизитам маршрута, match , location , history . Таким образом, вы можете использовать эти реквизиты во всех компонентах, которые вы визуализируете с помощью react-router-dom

Каковы методы визуализации маршрута?

Рекомендуемый метод визуализации чего-либо с помощью a <Route> -это использование дочерних элементов. Однако есть несколько других методов, которые вы можете использовать для визуализации чего <Route> -либо подобного

 <Route component>
<Route render>
<Route children> function

Каков ваш метод визуализации маршрута в вашем примере?

Вы использовали <Route component> в качестве <Route path="/" exact component={Home} />

Официальные Документы

Метки: