React multiple routes using the same component but with different parameters

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