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

Posted 2023-02-22

【中文标题】TypeError：使用来自 react-router 的 useParams 时无法读取未定义的属性“匹配”

【英文标题】：TypeError: Cannot read property 'match' of undefined when using useParams from react-router

【发布时间】：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>
    </>
  );
;

【参考方案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' ),
))

希望这行得通！