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

【问题标题】：ReactJS props aren't being passed to other component when navigating?导航时 ReactJS 道具没有被传递给其他组件？
【发布时间】：2021-12-27 14:55:01
【问题描述】：

所以在我的应用程序中，我有一个登录组件和一个身份验证器组件。最后一个与二维码授权等配合使用。

由于现在不推荐使用“node-sass”包，我改为使用“sass”NPM 包。我不得不将“react-router”和“react-router-dom”升级到最新版本（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"
  },

所以我的下一步是将所有内容从“react-router”和“react-router-dom”更改为使用他们最新的项目，例如“useHistory”更改为“useNavigate”等。

他们的 "history.push("/route")" 现在也改成了 "navigate("/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(App)”等...

这是（部分）我的应用路由：

 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 />
                }
              />
              ...

如您所见，现在“Routes”的位置是以前的“react-router-dom”版本中的“Switch”。

我曾经在页面之间导航，如下所示：

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

... 

const navigate = useNavigate();  

...

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

如您所见，我现在使用来自“react-router-dom”的 V6“导航”，而不是之前的“history.push('/authenticator')”。

此导航有效，但是没有传递任何道具（如 authMode 和用户名），并且道具在目标/新组件中始终“未定义”，当此处/源组件被填充时。

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

// 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,
});

谢谢！

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

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

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

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

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

你必须像上面一样设置“location”的“location.state”属性。现在“location.state”道具将包含我的对象，带有“authMode”和“userName”。

在我的 Authenticator 组件中，我现在这样做：

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

这是 react-router v6 的另一个有用链接：https://remix.run/blog/react-router-v6

【讨论】：