类型错误：从 react-router 使用 useParams 时，无法读取未定义的属性“匹配”

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

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

该Router组件将包含 的上下文注入match到它下面的树中，useParams钩子将通过在内部使用useContext钩子来读取它。

Answer 2

您可以在 useParams 的笑话测试文件中使用此代码。这对我有用

 jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useParams: jest.fn().mockReturnValue({ environment: 'dev', service: 'fakeService' }),
}))

希望这有效！