TypeError：使用来自 react-router 的 useParams 时无法读取未定义的属性“匹配”答案

【问题标题】：TypeError: Cannot read property 'match' of undefined when using useParams from react-routerTypeError：使用来自 react-router 的 useParams 时无法读取未定义的属性“匹配”
【发布时间】：2020-03-27 22:48:08
【问题描述】：

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

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


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>
    </>
  );
};

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

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

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

【讨论】：

这是不正确的。从“react-router”而不是“react-router-dom”导入的操作导致问题。
@ChrisMatthews 其实我查了一下，你说的不正确。 react-router 会导出 useParams。如果不是这种情况，OP 也会看到不同的错误消息，表明该模块中没有命名导出 useParams。
@ChrisMatthews 证明：codesandbox.io/s/staging-fog-eez2n?file=/src/App.js

【解决方案2】：

如果其他人在尝试使用 useParams 获取 查询/搜索参数 和 not URL 参数 时看到此错误，您可以从react-router-dom使用useLocation

import { useLocation } from 'react-router-dom';
...
...
const query = new URLSearchParams(useLocation().search);
...

Difference between Query Parameters and URL Parameters

Query Parameter demo

Brwoser Support for URLSearchParams()

【讨论】：

【解决方案3】：

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

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

希望这行得通！

【讨论】：