使用相同的组件但使用不同的参数来响应多个路由答案

【问题标题】：React multiple routes using the same component but with different parameters使用相同的组件但使用不同的参数来响应多个路由
【发布时间】：2022-11-18 18:15:42
【问题描述】：

我有一个具有多个状态的 Login 组件，具体取决于我想在此组件中显示不同元素的 url。这是我如何设置我的Routes

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

// Pages

import Home from '../pages/home';
import Login from '../pages/login';


export default function App() {
  
  // Render
  
  return (
    <div className="app">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />}/>
          <Route exact path="/login" element={<Login state="login"/>}/>
          <Route exact path="/signup" element={<Login state="signup"/>}/>
          <Route exact path="/reset-password" element={<Login state="reset"/>}/>
        </Routes>
      </BrowserRouter>
    </div>
  );
  
}

我正在使用 BrowserRouter v6，每当我加载/重新加载页面时，这段代码都可以正常工作。但是，使用 <Link to="/reset-password"></Link> 从一个 Login 页面转到另一个页面似乎不会重新安装页面上的组件。

我已经看到一些将 <Route exact path="/login" component={...}/> 与 BrowserRouter v5 一起使用的示例，但是当使用 component 而不是 element 与此版本时，我似乎无法让它显示任何内容。

我有什么我想念的，还是我做错了？

【问题讨论】：

codesandbox.io/s/stackoverflow-routing-issue-the-sloth-hlshbb 请检查沙箱示例。您的代码似乎工作正常。
嗯好的谢谢你的领导。我想我已经找到了问题所在，它显然不是您所展示的那样来自路线。我在登录页面中有一些条件呈现，这似乎是导致错误的原因。
没问题。是的，问题一定是由其他原因引起的。

标签： javascript reactjs routes

【解决方案1】：

v6 的一项新功能是新的 Outlet 组件。看看创建带插座的布局是否可以帮助您：https://reactrouter.com/docs/en/v6/examples/basic

【讨论】：

【解决方案2】：

我有这种类型的问题。我有一个表作为子组件到具有不同过滤器的两条不同路由的父组件中。对数据的异步调用进入了父组件，并且它被设置为 redux 存储。表正在从该商店获取数据。

问题是，当我在这两条路线之间切换时，更新表中的数据会出现延迟。

所以我通过在卸载子组件（表）时清除 redux 状态来解决问题。像这样

useEffect(() => {
    return ()=>{
       // cancel previous API calls that are being used to list data
      //clear data from redux store
    }
  },[dispatch])

这里需要注意的一点是这段代码要写成在子组件中

（在我的例子中是表）。

【讨论】：