反应路由器使用参数返回空对象

Posted 2023-02-22

【中文标题】反应路由器使用参数返回空对象

【英文标题】：react router use params returns empty object

【发布时间】：2021-08-03 13:08:55

【问题描述】：

我有一个正在开发中的网络应用程序，就像使用 firebase 的谷歌驱动器一样。我在仪表板屏幕中有这个 useParams()，它是具有所有不同文件夹路径的应用程序的主页。因此，对于这个屏幕，我使用了 useParams，现在当我使用 console.log(params) 时，它显示一个空对象 ，并且当我单击按钮时，它不会仅导航 URL 更改

Github 代码：- https://github.com/KUSHAD/RDX-Drive/

在 App.js 中

import  BrowserRouter, Switch, Route  from 'react-router-dom';
import PrivateRoute from './Components/Route/PrivateRoute';
import Dashboard from './Screens/Main/Dashboard';
import ViewProfile from './Screens/Profile/ViewProfile';
import Signup from './Screens/Auth/Signup';
import Login from './Screens/Auth/Login';
import ForgotPassword from './Screens/Auth/ForgotPassword';
function App() 
    return (
        <>
            <div className='App'>
                <div className='main'>
                    <BrowserRouter>
                        <Switch>
                            /* Drive */
                            <PrivateRoute exact path='/' component=Dashboard />
                            <PrivateRoute
                                exact
                                path='/folder/:folderId'
                                component=Dashboard
                            />

                            /* Profile */
                            <PrivateRoute path='/profile' component=ViewProfile />

                            /* Auth */
                            <Route path='/signup' component=Signup />
                            <Route path='/login' component=Login />
                            <Route path='/forgot-password' component=ForgotPassword />
                        </Switch>
                    </BrowserRouter>
                </div>
            </div>
        </>
    );


export default App;

在 Dashboard.js 中

import NavBar from '../../Components/Shared/NavBar';
import Container from 'react-bootstrap/Container';
import AddFolderButton from '../../Components/Main/AddFolderButton';
import  useDrive  from '../../services/hooks/useDrive';
import Folder from '../../Components/Main/Folder';
import  useParams  from 'react-router-dom';
export default function Dashboard() 
    const params = useParams();
    console.log(params);
    const  folder, childFolders  = useDrive();
    return (
        <div>
            <NavBar />
            <Container fluid>
                <AddFolderButton currentFolder=folder />
                childFolders.length > 0 && (
                    <div className='d-flex flex-wrap'>
                        childFolders.map(childFolder => (
                            <div
                                key=childFolder.id
                                className='p-2'
                                style= maxWidth: '250px' >
                                <Folder folder=childFolder />
                            </div>
                        ))
                    </div>
                )
            </Container>
        </div>
    );

【问题讨论】：

仪表板路径是“/”，没有要列出的任何路由匹配参数...我希望看到一个空对象。你指的是点击什么按钮？您的 sn-ps 中没有。哦，我明白了，您还试图为其他嵌套路由渲染 Dashboard 组件。导航发生在哪里？我假设您在某处有一些 Link 组件？

没有Link 组件在Folder 组件内

【参考方案1】：

问题

在搜索您的存储库寻找“它不仅仅导航 URL 更改”的常见可疑原因之后，我没有发现任何奇怪的东西，例如多个 Router 组件等。我认为问题是您的 PrivateRoute 组件没有正确地将道具传递给Route。您正在解构一个名为rest 的道具，然后将其传播到Route，但您没有将rest 道具传递给PrivateRoute

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的道具：

<PrivateRoute exact path='/' component=Dashboard />
<PrivateRoute
  exact
  path='/folder/:folderId'
  component=Dashboard
/>

我认为这里发生的是 exact 和 path 道具没有传递给底层的 Route 组件，因此 Switch 的第一个嵌套组件被匹配和渲染，“/ " 没有任何路由参数。

解决方案

解决方法是将传递的其余道具分散到rest，而不是解构命名的rest 道具。

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

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

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

这会检查您的用户身份验证并呈现Route 或Redirect。此模式允许您使用所有常规的 Route 道具，因此您不会被锁定在使用 render 道具来渲染组件。

【讨论】：

谢谢 Drew Reese 的作品正如预期的那样

@KUSHAD 太好了，听起来这个答案有助于解决您的问题/问题，如果是这样，那么我邀请您将其标记为已接受的答案。如果您觉得它有帮助，请不要忘记也投票（如果您还没有投票）。干杯。