javascript - 类型错误 : Cannot read property 'match' of undefined when using useParams from react-router

Question

我不明白为什么它会给我上面的错误。我使用 props.match.params.languagename 的 props 方式，效果很好。

我没有在下面的代码中包含所有导入。

import { useParams } from 'react-router';

const App = () => {
  const topicsState = useSelector(state => state.topics);

  const dispatch = useDispatch();
  const { languagename } = useParams();

  useEffect(() => {
    dispatch(fetchGitHubTrendingTopics());
  }, [dispatch]);

  const handleRepositoryPages = () => {
    const repositoryPages = topicsState.find(
      topicState => topicState.name === languagename
    );
    if (repositoryPages)
      return <RepositoryPage repositoryPages={repositoryPages} />;
  };
  return (
    <>
      <Router>
        <Header topics={topicsState} />
        <Switch>
          <Route path="/" exact>
            <Dashboard topics={topicsState} />
          </Route>
          <Route
            path="/language/:languagename"
            exact
            render={handleRepositoryPages()}
          />

          <Redirect to="/" />
        </Switch>
      </Router>
    </>
  );
};

Answer 1

您只能在 Router 组件的子组件中使用 useParams，但在您的情况下，App 是父组件。

Router 组件将包含 match 的上下文注入(inject)到其下方的树中，useParams 钩子(Hook)将通过内部使用useContext 钩子(Hook)。