2

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?

mheavers
  • 29,530
  • 58
  • 194
  • 315
  • This looks like it should work can you reproduce in a sandbox? – Sean Apr 27 '22 at 16:13
  • I copy your code in a sandbox and works perfectly with `Link` component, I don't see some error, do you trying reset your server? – enzou Apr 27 '22 at 18:23
  • Is the URL updating when using the `Link` component? Are you using React 18 by any chance? Does this help answer your question? https://stackoverflow.com/a/71833424/8690857 – Drew Reese Apr 28 '22 at 01:17
  • @DrewReese - yes! I think this is the issue - I'm using React 18 and React Router V5 and I don't think the URL is updating. Please feel free to list this as an answer and I'll test and accept. – mheavers Apr 28 '22 at 15:21

1 Answers1

0

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!

Sebastian Varona
  • 1
  • 2