导航时，ReactJS道具没有传递给其他组件？

Question

所以在我的应用程序中，我有一个登录组件和一个身份验证组件。最后一种方法适用于QR代码授权等。

由于程序包“node”现在已被废弃，所以我更改为"sass“NPM包。我不得不升级的“反应路由器”和“反应路由器-多姆”以及他们的最新版本(6.)。

下面是我的依赖关系：

 "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@react-pdf/renderer": "^1.6.12",
    "@reduxjs/toolkit": "^1.4.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.20.0",
    "caniuse-lite": "^1.0.30001197",
    "moment": "^2.29.1",
    "qrcode.react": "^1.0.0",
    "qs": "^6.9.4",
    "react": "^16.13.1",
    "react-async": "^10.0.1",
    "react-dom": "^16.13.1",
    "react-fade-in": "^1.1.0",
    "react-icons": "^3.11.0",
    "react-movable": "^2.5.3",
    "react-outside-click-handler": "^1.3.0",
    "react-qr-reader": "^2.2.1",
    "react-redux": "^7.2.1",
    "react-router": "^6.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "3.4.3",
    "redux": "^4.0.5",
    "redux-axios-middleware": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "sass": "^1.43.4",
    "xlsx": "^0.16.8"
  },

因此，我的下一步是改变所有的东西，从“反应-路由器”和“反应-路由器-多姆”使用他们的最新项目，如"useHistory“改为"useNavigate”等。

他们的"history.push("/route")“现在也改为”导航(“/route”)，所以我也改变了它们。

最后，他们从包中删除了"withRouter“函数，这是导航在主应用程序中工作所必需的。以前是这样的：

export default withRouter(App);

但现在这是它所取代的钩子：

import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

export const withRouter = (Component) => {
  const Wrapper = (props) => {
    const navigate = useNavigate();
    const location = useLocation();
    
    return (
      <Component
        {...props}
        navigate={navigate}
        location={location}
      />
    );
  };
  
  return Wrapper;
};  

然后导入它，然后使用“withRouter(应用程序)”等.

下面是我的应用程序路由的一部分：

 return (
    <ThemeProvider theme={theme}>
        <Loading />
        <Header
          menuHandler={() => {
            changeMenu(!showMenu);
          }}
          setActive={setActive}
        />
        <main className="main">
          <MenuBar
            showMenu={showMenu}
            toggleMenu={() => changeMenu(!showMenu)}
            active={active}
            setActive={setActive}
          />
          <Container className="main__container" id="main__container">
            <MySnackbar />
            <Modal />
            <Routes>
              <Route
                path="/scanner"
                element={
                  <ScannerScreen />
                }
              />
              <Route
                path="/authenticator"
                element={
                  <Authenticator />
                }
              />
              <Route 
                path="/login" 
                element={
                  <Login />
                }
              />
              ...

正如你所看到的，它现在说的“路由”是以前的“”版本中的"Switch“。

我过去经常在页面之间导航，如下所示：

import { useNavigate } from "react-router-dom";

... 

const navigate = useNavigate();  

...

navigate("/authenticator", {
    authMode: "login",
    username: user.username,
});

如您所见，我现在使用的是从“react router”到“V6”的“导航”，而不是以前的"history.push('/authenticator')“。

这个导航可以工作，但是没有传递任何道具(比如authMode & username)，当这里/源组件被填充时，道具总是在目标/新组件中“未定义”。

无论我做什么，道具总是没有定义，就像这样：

// both authMode & username will be undefined
const Authenticator = ({ authMode, username }) => {...}

// props will be undefined
const Authenticator = (props) => {...}

// both of these will return undefined values
const Authenticator = () => {
      const { authMode, username } = useParams();
      const { authMode, username } = useLocation();
}

有人知道我如何使用Javascript正确地将道具从登录传递到我的身份验证器，如下所示：

navigate("/authenticator", {
    authMode: "login",
    username: user.username,
});

谢谢!

Answer 1

所以，当然，在发布了一个堆叠溢出的帖子后，我继续挖掘，最后自己找到了“一个”解决方案。我不确定这是否是最好的方法，但它在这里。

看看这篇文章：https://stackoverflow.com/a/64566486/3384458，道具不再是“仅仅”传递给其他组件。现在必须经过“位置”道具。

所以现在我必须这样做，在我的登录组件中：

navigate("/authenticator", {
    state: {
        authMode: "login",
        username: user.username,
    }
});

您必须设置“位置”的"location.state“支柱，如上面所示。现在"location.state“道具将包含带有"authMode”和"userName“的对象。

在我的身份验证组件中，我现在这样做：

const { authMode, username } = useLocation().state;

下面是另一个用于react路由器v6的有用链接：https://remix.run/blog/react-router-v6