javascript - props.location 未定义路由组件

Question

我正在尝试运行如下代码片段:

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Navbar></Navbar>
          <Routes>
            <Route path="/" element={<Home></Home>} />
            <Route path="/about" element={<About></About>} />
            <Route path="/contact" element={<Contact></Contact>} />
            <Route path="/challenges/*" element={<Challenges></Challenges>} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </div>
      </Router>
    );
  }
}
let a = 0;

const Challenges = (props) => {
  console.log(++a);
  console.log(window.location.pathname);
  const path = props.location.pathname;
  const slug = path.split("/").slice(path.split("/").length - 1)[0];
  const challenge = challenges.find((challenge) => challenge.slug === slug);
  return (
    <div>
      <h1>30 Days Of React Challenge</h1>
      <ul>
        {challenges.map(({ name, slug }) => (
          <li key={name}>
            <NavLink to={`/challenges/${slug}`}>{name}</NavLink>
          </li>
        ))}
      </ul>
      <Routes>
        <Route
          exact
          path="/challenges"
          element={<h1>Choose any of the challenges</h1>}
        />

        <Route path={path} element={<Challenge challenge={challenge} />} />
      </Routes>
    </div>
  );
};

我想在 Challenges 路由组件中获取路径，但它会抛出一个错误:无法读取未定义的属性(读取“路径名”)我尝试记录变量“a”和“window.location”进行测试，它记录了两次，如下所示:

1
/challenges
2
/challenges

我的问题是为什么我不能获取 props.location.pathname 的值，为什么它运行两次而第二次它抛出错误为什么不在第一次。谢谢你帮助我!希望你今天过得愉快。

Answer 1

问题

1. react-router-dom v6 Route 组件通过 element 属性渲染不接收 route props .
2. 路由子组件必须使用 react 钩子(Hook)来访问路由上下文，即useParams、useLocation、useNavigate等...因此必须是函数组件。
3. console.log 调用在函数体中，因此这些是无意的副作用。这可能是它们被调用两次的原因，假设应用程序被渲染到 React.StrictMode 组件中。

解决方案

挑战 应该使用uselocation 钩子(Hook)来访问路径名。将控制台日志移动到 useEffect Hook 中，以便每次渲染到 DOM 时调用一次。

const Challenges = (props) => {
  const { pathname } = useLocation();

  useEffect(() => {
    console.log(++a);
    console.log(pathname);
  });

  const path = pathname;
  const slug = path.split("/").slice(path.split("/").length - 1)[0];
  const challenge = challenges.find((challenge) => challenge.slug === slug);

  return (
    <div>
      <h1>30 Days Of React Challenge</h1>
      <ul>
        {challenges.map(({ name, slug }) => (
          <li key={name}>
            <NavLink to={`/challenges/${slug}`}>{name}</NavLink>
          </li>
        ))}
      </ul>
      <Routes>
        <Route
          path="/challenges"
          element={<h1>Choose any of the challenges</h1>}
        />

        <Route path={path} element={<Challenge challenge={challenge} />} />
      </Routes>
    </div>
  );
};

v6 api-reference