Javascript reactjs道具在路线创建中丢失

我试图通过

react-router-dom

开关块将用户的身份验证状态传递给组件（我认为我应该考虑实现

redux

，但这是后面的问题）

有一个

Home

视图，在用户进行身份验证后传递所有登录信息，我可以使用react devtools在Home组件中将

authState

对象作为道具：

import React from "react";
import Dashboard from "../Dashboard";
import {Switch, Route} from "react-router-dom";
import NoMatch from "../NoMatch";

function Home(props) {
// authState exists
    return (
        <Switch {...props}>
            // authState exists
            <Route exact path="/" render={(...props) => <Dashboard {...props} />} /> // authState gone
            <Route component={NoMatch} />
        </Switch>
    );
}

export default Home;

从“React”导入React；
从“./Dashboard”导入仪表板；
从“react router dom”导入{Switch，Route}；
从“./NoMatch”导入NoMatch；
功能主页（道具）{
//身份验证状态存在
返回(
//身份验证状态存在
}///authState消失了
);
}
导出默认主页；

执行此操作后，它将呈现

仪表板

，并使用react devtools跟踪组件链，我可以看到道具已成功地从

主

组件传递到

开关

组件。但是，一旦到达

路线

道具就消失了，

仪表板

组件中唯一可用的道具是

历史

、

位置

和

匹配

道具

---

为什么缺少道具，以及传递道具的正确方法是什么？

您的代码中需要进行几项改进：

• 将道具传递给

  开关
  组件是不必要的

• 无需使用rest语法收集路由器道具，只需在以后传播

主要问题：

• props

  在传递给

  render

  prop的函数中，prop指的是路由器props，而不是传递给

  Home

  组件的props。您对两个不同的事物使用相同的标识符

解决方案

为路由器道具和传递到

Home

组件的道具使用不同的名称，您希望传递到

Dashboard

组件

function Home(props) {
  return (
    <Switch>
      <Route
         exact
         path="/"
         render={(routerProps) => <Dashboard {...routerProps} {...props} />}
      />
      <Route component={NoMatch} />
    </Switch>
  );
}

---

现在，您将无法访问

仪表板

组件内的路由器道具，但用户的身份验证状态将传递到

仪表板

组件。

您拥有

道具

在

主页

的范围内以及

路由

的渲染功能内。作用域越高的变量将被作用域越低的变量隐藏。您可以重命名其中一个并将其展开：

（renderProps）=>

<Route
   exact
   path="/"
   render={() => <Dashboard {...props} />}
/>