Invariant failed: You should not use <Route> outside a <Router> in Reactjs
Dung Do Tien
Dec 19 2021
84
I have a small project very simple with ReactJs, I created App.js file with some router as below:
import React, {Component , Fragment} from 'react';
import {withRouter , Route , Switch , Redirect} from 'react-router-dom';
import Home from './component/Home';
import Products from './component/Products';
import Articles from './component/Articles';
import Faq from './component/Faq';
@withRouter
class App extends Component {
render() {
return (
<Fragment>
<Switch>
<Route path='/' component={Home}></Route>
<Route path='/products' component={Products}></Route>
<Route path='/tips' component={Articles}></Route>
<Route path='/faq' component={Faq}></Route>
<Redirect to={'/'}/>
</Switch>
</Fragment>
);
}
}
export default App;
My website will have three categories, they are product, tip and faq but when I ran code I got an error Uncaught Error: Invariant failed: You should not use <Route> outside a <Router>.
Uncaught Error: Invariant failed: You should not use <Route> outside a <Router>
at invariant (tyny.invariant.esm.js:10)
at withRouter.js:18
at updateContextConsumer (reac-dom.development.js:18425)
at beginWork (reac-dom.development.js:18676)
at HTMLUnknownElement.callCallback (reac-dom.development.js:876)
at Object.invokeGuardedCallbackDev (reac-dom.development.js:349)
I think I have problem with router it may be wrong with <Switch> tag.
How can I fix this issue?
Thank you for any suggestion.
Have 2 answer(s) found.
-
A0
Ashok kumar Dec 19 2021
You can try replace
<Fragment>tag with<BrowserRouter>see code below:import React, {Component , Fragment} from 'react'; import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'; import Home from './component/Home'; import Products from './component/Products'; import Articles from './component/Articles'; import Faq from './component/Faq'; @withRouter class App extends Component { render() { return ( <BrowserRouter> <Switch> <Route path='/' component={Home}></Route> <Route path='/products' component={Products}></Route> <Route path='/tips' component={Articles}></Route> <Route path='/faq' component={Faq}></Route> <Redirect to={'/'}/> </Switch> </BrowserRouter> ); } } export default App;I hope it helpful for you.
-
M0
MRIDUAVA মৃদুআভা Dec 19 2021
You can create another component and this component with content
App.js, for example:import React from 'react'; import ReactDOM from 'react-dom'; import App from './component/App'; import {BrowserRouter, Route} from 'react-router-dom' const Root = () => { return ( <BrowserRouter basename='/'> <Route path={/} component={App}></Route> </BrowserRouter> ) } ReactDOM.render(<Root/>, document.getElementById('root'));Or
import React from 'react'; import ReactDOM from "react-dom"; import App from './component/App'; import {BrowserRouter} from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root") );It really worked for me.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.