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

Question

I have one Login component with multiple states, depending on the url I'd like to display different elements within this component. Here is how I've set up my 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>
  );
  
}

I'm using BrowserRouter v6 and this code is working fine whenever I load / reload the page. However using a <Link to="/reset-password"></Link> to go to from one Login page to another does not appear to remount the components on the page.

I have seen some exemples using <Route exact path="/login" component={...}/> with BrowserRouter v5 but I can't seem to get it to display anything when using component instead of element with this version.

I there something I'm missing or am I going about this all wrong?

Answer 1

One new feature from v6 is the new Outlet component. See if creating a layout with an outlet can help you: https://reactrouter.com/docs/en/v6/examples/basic

Answer 2

i was having this type of problem. i had a table as a child component into a parent components of two different routes with different filters. Async call for data was into parent component and it was being set to redux store. table was getting data from that store.

problem was that,when i switch between these two routes,it was getting a delay to update data in table.

so i fixed problem by clearing redux state on unmount of child componant (table). like this

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

here the point to be noted that this code should be written in child component

(in my case Table).