Question

PreloadRoute 的想法是当用户点击导航到其个人资料时，在我的 Header 中显示一个加载行，并请求获取信息，一旦请求完成，则显示已加载的 UserPage 组件.我也将 PreloadRoute 用于其他组件，它们工作正常。但是对于这个，我遇到了 username 始终是 undefined 的问题，即使我在 url 中看到它在那里。

我想我直接在 App.js 文件中使用它，我认为这是根据这个答案的问题。 https://stackoverflow.com/a/59153982/12051965

import { useParams } from 'react-router-dom';

const PreloadRoute = ({ component: Component, preload, currentUser, ...rest }) => {
  const { username } = useParams();
  const dispatch = useAppDispatch();


    useEffect(() => {
        dispatch(setLoading(true));
        if (username) {
            dispatch(preload(username));
        }
    }, [username]);

    if (user) {
        return <Component {...rest} />;
    }
    return null;
}

我在 App.js 中有什么

<Router>
  <Switch>
    <PreloadRoute exact currentUser={currentUser} path="/:username" preload={fetchUser} component={UserPage} />
  </Switch>
</Router>

有人可以建议我应该在这里做什么来获取该用户名，或者提出更好的方法吗？基本上我想要实现的是当用户点击导航图标进入他们的个人资料时，首先调度请求获取用户，在请求发生时和完成后显示加载行，然后显示 UserPage 组件信息加载

React-router-dom useParams 返回未定义

0 个答案: