React Router DOM не может прочитать состояние местоположения - PullRequest
Новая
       4

React Router DOM не может прочитать состояние местоположения

2 голосов
/ 29 марта 2020

Я видел этот вопрос раньше, но применялся только к компонентам класса, поэтому я не уверен, как применить тот же подход к функциональным компонентам.

Это просто, у меня есть ссылка <Link to={{ pathname="/first-page" state: { name: "First person" }>First Page</Link>, а затем в компонент FirstPage. js Мне нужно прочитать состояние name, поэтому я попробовал следующее: 

import React from "react";

export default props => {
  React.useEffect(() => {
    console.log(props)
  }, []);
  return (
    <div>
      <h1>First Page</h1>
      <p>Welcome to first page, {props.location.state.name}</p>
    </div>
  );
};

Я читал Документация местоположения React Router и оно должно передавать состояние как свойство компонента, но это не так. Я совершенно уверен, что я что-то делаю неправильно или не вижу вообще.

Если вы хотите попробовать весь код, я оставлю здесь CodeSandbox project to " проверить это.

Следовательно, есть идеи, что я делаю не так? Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 29 марта 2020

Это не проблема функциональных и функциональных компонентов, а вопрос о том, как работают маршруты. Обернутые дети не получают параметры маршрута, но все, что отображается с использованием Route 's component, render или children prop do.

Методы рендеринга маршрута 

<Switch>
  <Route path="/first-page" component={FirstPage} />
  <Route path="/second-page" component={SecondPage} />
</Switch>

Edit pedantic-banzai-dhz27

Другой вариант - экспортировать оформленный компонент страницы, используя withRouter HO C или, если это функциональный компонент, используйте крючки.

withRouter

Вы можете получить доступ к свойствам history объекта и ближайшим <Route> 'match через withRouter компонент высшего порядка. withRouter будет передавать обновленные match, location и history реквизиты обернутому компоненту всякий раз, когда он рендерится. 

const FirstPage = props => {
  React.useEffect(() => {
    console.log(props)
  }, []);

  return (
    <div>
      <h1>First Page</h1>
      <p>Welcome to first page, {props.location.state.name}</p>
    </div>
  );
};

export default withRouter(FirstPage);

hooks

React Router поставляется с несколькими hooks, которые позволяют вам получить доступ к состоянию маршрутизатора и выполнять навигацию изнутри ваших компонентов. 

const FirstPage = props => {
  const location = useLocation();

  console.log(location);

  return (
    <div>
      <h1>First Page</h1>
      <p>Welcome to first page, {location.state.name}</p>
    </div>
  );
};

export default FirstPage;
1 голос
/ 29 марта 2020

Я нашел проблему в вашем роутере. Вместо использования: 

 <Route path="/first-page">
    <FirstPage/>
 </Route>

Использование: 

<Route path="/first-page" component={FirstPage}/>

В противном случае используйте хук, предоставляемый библиотекой let location = useLocation();, таким образом, у вас будет доступ к объекту местоположения.

...