Javascript react router use params返回空对象

我有一个正在开发的web应用程序，就像使用firebase的google drive一样。我在Dashboard屏幕中有一个useParams（），它是应用程序的主页面，包含所有不同的文件夹路由。因此，对于这个屏幕，我使用了useParams，现在当我使用console.log（params）时，它会显示一个空对象{}，而且当我单击按钮时，它不仅会导航URL更改

Github代码：-

在App.js中

从'react router dom'导入{BrowserRouter，Switch，Route}；
从“/Components/Route/PrivateRoute”导入PrivateRoute；
从“/Screens/Main/Dashboard”导入仪表板；
从“/Screens/Profile/ViewProfile”导入ViewProfile；
从“/Screens/Auth/Signup”导入注册；
从“/Screens/Auth/Login”导入登录名；
从“/Screens/Auth/ForgotPassword”导入ForgotPassword；
函数App（）{
返回(
{/*驱动器*/}
{/*配置文件*/}
{/*Auth*/}
);
}
导出默认应用程序；

在Dashboard.js中

从“../../Components/Shared/NavBar”导入导航栏；
从“react引导/容器”导入容器；
从“../../Components/Main/AddFolderButton”导入AddFolderButton；
从“../../services/hooks/useDrive”导入{useDrive}；
从“../../Components/Main/Folder”导入文件夹；
从'react router dom'导入{useParams}；
导出默认函数仪表板（）{
const params=useparms（）；
控制台日志（params）；
const{folder，childFolders}=useDrive（）；
返回(
{childFolders.length>0&&(
{childFolders.map（childFolder=>(
))}
)}
);
}

问题 在搜索您的回购协议，寻找“它不仅导航URL更改”的常见可疑原因后，我没有发现任何奇怪的情况，比如多个

路由器
组件等。我认为问题在于您的
PrivateRoute
组件没有正确地将道具传递到
路由。您正在解构一个名为
rest
的道具，然后将其传播到
路径
，但您没有将
rest
道具传递到
私有路径

export default function PrivateRoute({ component: Component, rest }) { // <-- rest prop
  const { currentUser } = useAuth();
  return (
    <Route
      {...rest} // <-- nothing is spread/passed here
      render={props => {
        return currentUser ? (
          <Component {...props} />
        ) : (
          <Redirect to='/login' />
        );
      }}
    />
  );
}

我认为这里发生的是
精确的
和
路径
道具没有传递给底层的
路由
组件，因此
开关
的第一个嵌套组件被匹配和渲染，即没有任何路由参数的“/”组件

解决方案
解决方法是将传递的其他道具分散到
rest
中，而不是分解命名的
rest
道具

export default function PrivateRoute({ component: Component, ...rest }) {
  const { currentUser } = useAuth();
  return (
    <Route
      {...rest}
      render={props => {
        return currentUser ? (
          <Component {...props} />
        ) : (
          <Redirect to='/login' />
        );
      }}
    />
  );
}

导出默认函数PrivateRoute（{component:component，…rest}）{
const{currentUser}=useAuth（）；
返回(
{
返回当前用户(
) : (
);
}}
/>
);
}

您的私人路线可能有以下改进：

export default function PrivateRoute(props) {
  const { currentUser } = useAuth();
  return currentUser ? (
    <Route {...props} />
  ) : (
    <Redirect to='/login' />
  );
}

导出默认函数PrivateRoute（props）{
const{currentUser}=useAuth（）；
返回当前用户(
) : (
);
}

这将检查用户身份验证并呈现
路由
或
重定向
。此模式允许您使用所有常规的
路由
道具，这样您就不会被锁定使用
渲染
道具来渲染组件。
仪表板路径为“/”，没有任何路由匹配参数要列出。。。我希望看到一个空的物体。您指的是单击哪些按钮？您的代码片段中没有任何内容。哦，我明白了，您还试图为其他嵌套管线渲染
仪表板
组件。导航发生在哪里？我假设您在某个地方有一些
链接
组件？没有
链接
组件在
文件夹中
组件谢谢Drew Reese也可以Expected@KUSHAD很好，听起来这个答案帮助解决了你的问题，如果是的话，那么我邀请你将这个标记为已接受的答案。如果你觉得它有帮助，那么请不要忘记也投票（如果你还没有）。干杯
export default function PrivateRoute(props) {
  const { currentUser } = useAuth();
  return currentUser ? (
    <Route {...props} />
  ) : (
    <Redirect to='/login' />
  );
}