React Router V5 - link component is not switching routes (but an anchor link works) [duplicate]

Question

I've got a create react app with react router v5 and the following setup:

import React, { useState } from "react";
import "./App.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import EmailRep from "./components/EmailRep";
import WebAuthN from "./components/WebAuthN";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route exact path="/">
            <EmailRep />
          </Route>
          <Route path="/webauthn">
            <WebAuthN />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

In my EmailRep component, if I attempt to link to the WebAuthN route, it does nothing

import React from "react";
import { Link } from "react-router-dom";

export default function EmailRep() {
  return <Link to="/webauthn">WebAuthN</Link>;
}

But this works:

import React from "react";
import { Link } from "react-router-dom";

export default function EmailRep() {
  return <a href="/webauthn">WebAuthN</a>`;
}

What am I missing?

Answer 1

I can't tell if this is your case because you didn't share those components code but maybe you forgot to import the Link module from react-router-dom,

Try inserting this snippet at the top of your EmailRep and WebAuthN modules:
import { Link } from 'react-router-dom'

Hope this helps!