reactjs - 如何在子子组件或子组件中使用嵌套反应路由器

问题描述

我正在制作一个应用程序，我必须通过 firebase fireStore 维护汽车记录，但我在路由组件时遇到问题，我不知道如何在子组件中进行路由。链接中提到了我的所有代码：https ://codesandbox.io/s/inventory-forked-yhg20 我使用的场景如下

组件是App.js Home.js ShowCars.js Header.js Car.js和EditCar.js
App.js包含Header.js Home.js和ShowCars.js
在Header.js中，它就像一个导航栏，我可以在其中路由到Home.js和ShowCars.js
当点击NavBar 上的Show Car时http://localhost:3000/showcar创建链接并在ShowCars.js中从 firebase 服务器获取数据，并在每个地图上呈现汽车数组使用cars.map()
在car.map()中使用了一个Car.js组件，它在每个地图上呈现一个表格行
在car.js 中，我使用了一个编辑链接，我希望该编辑链接呈现一个EditCar.js组件并将其路由到新路径，如http://localhost:3000/showcar/edit或http://localhost:3000/编辑任何合适的路径都是可以接受的。这是我不知道如何使用react-router渲染到新组件的地方

我需要的问题的解决方案是

单击编辑链接时转到新路径，应该呈现EditCar.js

或者

通过car.map()中的< EditCar car={car} /> 将汽车作为道具传递，并在单击编辑链接时转到新路径，并且应该在评论中提到EditCar.js渲染（如果是，这应该是第一优先级）不可能，那么第一点也可以接受）

    return (
     <div>
       ShowCars
      <hr />
      <table className="table">
        <thead className="thead-light ">
          <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Chasis-No</th>
            <th scope="col">Color</th>
            <th scope="col">Edit</th>
          </tr>
        </thead>
        <tbody>
          {cars.map(({ id, car }, index) => (
            <>
              <Car key={id} car={car} index={index} />
              {/* 
                    <Route path="/Edit" >
                        <EditCar car={car}/>. 
                    </Route>         
              */}
            </>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default ShowCars;

代码链接是：https ://codesandbox.io/s/inventory-forked-yhg20 。在 CodeSandBox 中编辑代码会很有帮助。询问我的信息是否不完整

标签： reactjsreact-routerreact-hooksreact-router-dom

如果用户/edit直接访问会发生什么？然后ShowCars组件永远不会被渲染，所以不会有/edit路由。

所以我不太确定选项 2。但你可以这样做：

您可以导航到/edit/<carId>，那里有汽车 ID 并且可以渲染正确的汽车。
如果您不想在路径中使用 id，可以使用将汽车 id 保存到to对象的状态。看这里
在全局上下文中保存汽车 ID

编辑：

这是代码框

我认为你应该在路径Header.js的开头添加一个斜杠"showcar"

reactjs - 如何在子子组件或子组件中使用嵌套反应路由器

问题描述

解决方案

推荐阅读