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?
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!