类型错误：从 react-router 使用 useParams 时无法读取未定义的属性'match'

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的上下文注入到其下方的树中，该树将由useParams钩子在内部使用useContext钩

子读取。

Answer 2

你可以用这段代码，在开玩笑的测试文件中用于 useParams。这对我有用

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

希望这有效！

Answer 3

对于在尝试使用useParams获取查询/搜索参数而不是URL 参数时看到此错误的任何其他人，您可以使用useLocation来自react-router-dom

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

查询参数和网址参数的区别

查询参数演示

Brwoser 对URLSearchParams()的支持