javascript - react 路由器使用参数返回空对象

Question

我有一个正在开发的网络应用程序，就像使用 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>
    );
}

Answer 1

问题
在搜索你的仓库寻找“它不仅仅导航 URL 更改”的常见可疑原因之后，我没有发现任何奇怪的东西，比如多个 Router组件等。我认为问题在于您的 PrivateRoute组件没有将 Prop 传递给 Route正确。你正在解构一个名为 rest 的 Prop 然后将其传播到 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 的 Prop :

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

我认为这里发生的是 exact和 path props 不会传递给底层 Route组件，因此是 Switch 的第一个嵌套组件匹配并渲染，没有任何路由参数的“/”。
解决方案
解决方法是将剩余的传递 Prop 分散到 rest 中。而不是解构命名的 rest支柱。

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

您的私有(private)路线的改进可能如下:

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

这将检查您的用户身份验证并呈现 Route或 Redirect .此模式允许您使用所有常规 Route Prop 所以你不会被锁定使用 render prop 来渲染组件。