javascript - React Router DOM 无法读取位置状态

Question

我以前见过这个问题，但只适用于 Class 组件，所以我不确定如何将相同的方法应用于功能组件。

很简单，我有链接<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 location documentation它应该将状态作为组件属性传递，但事实并非如此。我很确定我做错了什么或根本没有看到。

如果您想尝试整个代码，我将在这里留下 CodeSandbox project来“测试”这个。

因此，关于我做错了什么的任何想法？提前致谢。

Answer 1

这不是基于类与功能组件的问题，而是路由如何工作的问题。包裹的 child 不会收到路由参数，而是使用 Route 渲染的任何内容的component , render , 或 children Prop 做。

Route render methods

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

另一个选项是使用 withRouter 导出修饰的页面组件。 HOC，或者如果是功能组件，请使用钩子(Hook)。

withRouter

You can get access to the history object’s properties and the closest <Route>'s match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

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 ships with a few hooks that let you access the state of the router and perform navigation from inside your components.

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;