Category : react-router

I am using "react-router": "^6.0.0-beta.0" and "react-router-dom": "^6.0.0-beta.0" in my project. When compiling the project, it compiles successfully, however the browser displayes the following error: Error: useRoutes() may be used only in the context of a Router component. My App.ss is: import routes from ‘./routes’ import { useRoutes } from ‘react-router-dom’; function App() { const ..

Read more

I have tried using <Switch> and exact after viewing this post: React Router v4 renders multiple routes but it hasn’t resolved my problem, which is that 2 of my components are rendered at the same time when the <Link> function operates. The code: import React from "react"; import ‘../styles/Onboarding.css’; import {Link, Route, BrowserRouter as Router, ..

Read more

To manage my route, i have a parent : <Switch> <Route exact path="/" render={() => ( isLogged ? (<Route component={UserHome}/>) : (<Route component={Home}/>) )}/> <Route exact path="/Accueil" component={Home}/> <Route exact path="/mon_accueil" component={UserHome}/> <Route exact path="/mon_compte" component={UserAccount}/> <Route exact path="/inscription" component={UserRegister}/> <Route exact path="/connexion" component={UserConnection}/> <Route exact path="/mon_aventure" component={UserMap}/> {/* First component */} <CreateHome/> {/* Second ..

Read more

I am trying to pass the props in the route component, I know we cannot directly pass to that, so I used to render, but the props are still undefined in the child component. import React from ‘react’; //components import Register from ‘../components/register/register’; import Login from "../components/login/login"; import ForgetPassword from ‘../components/forget-password/forget-password’; //redux import {store} from ..

Read more

Using react-router-dom 5.2.0 for what that is worth. By habit I tend to put all my Route components wrapped within a Switch component. Example: const MyRoutes = () => ( <Switch> <Route path=’/route1′ exact component={() => <Route1Component />} /> <Route path={[ ‘/route2’, ‘/route2/subroute’, ‘/route2/subroute2′, ]} exact component={() => <Route2Component />} /> <Route path=’*’ exact component={() ..

Read more