Link outside of Router

user_12225556 0
Viewed 46

I testing my React App and I have an error of all Link react router dom in my views.

Index.js

import {
 BrowserRouter as Router,
 Switch,
 Route
} from "react-router-dom";

function App({props}) {
 return (
  <div>
   <Navbar />
     <Switch>
      <Route path="/" exact component={Homepage} appProps={props}/>
      <Route path="/accueil" exact component={Homepage} appProps={props}/>
      <Route component={Error} />
    </Switch>
   <Footer />
  </div>
 );
}

ReactDOM.render(
 <Router>
  <App />
 </Router>,
 document.getElementById("fatboar")
);

Homepage.js

import { Link } from 'react-router-dom';

export default function Homepage(props) {
  return ( 
   <Link to="/ajouter-ticket" className="primary-btn mt-5">Je participe</Link>
  )
}

How my Link is outside of my router ?

react-router-dom reactjs
1 Answers

The Link is navigate to /ajouter-ticket and as I see from your code you never put a Route to this Link due to this you navigate to the Error Component and if you read the react-router-dom doc you will see that when you navigate to something that doesn't define in the Switch Route go to the Route Without a path React Router Dom Doc

<Route path="/ajouter-ticket" exact component={SomeComponent} appProps={props}/>

also, why do you have to routes to the HomePage?

user_135821000
Related