reactjs - React Router and Links all directing to the same page?

Question

Im pulling my hair out trying to figure out why the list of react Links is all just loading the error page. Could anyone advise please? its almost a direct copy of a previous project that worked perfectly.

Router Set up

function App() {
  return (
  <Router>
    <Switch>
      <Route exact path = '/'>
        <Home />
      </Route>
      <Route path = "*">
        <Error />
      </Route>
      <Route path = '/about'>
        <About />
      </Route>
      <Route path = '/contact'>
        <Contact />
      </Route>
      <Route path = '/deckbuilder'>
        <DeckBuilder />
      </Route>
    </Switch>
  </Router>
  )
}

export default App;

Links on Home Page

export const Home = () => {
    return (
        <div>
            <h1> Home Page </h1>
            <Link to = '/contact'>
                Contact
            </Link>
            <Link to = '/about'>
                about
            </Link>
            <Link to = '*'>
                Error
            </Link>
            <Link to = '/deckbuilder'>
                Deck
            </Link>
        </div>
        
    )
}

question from:https://stackoverflow.com/questions/65872358/react-router-and-links-all-directing-to-the-same-page

Answer 1

You should use react router like this and put error component at last, this is correct syntax:

        <Switch>
            <Route exact path='/' component={Landing} />
            <Route exact path='/sign' component={Sign} />
            <Route exact path='/login' component={Dashboard} />
            <Route component={GenericNotFound} />
        </Switch>