Invariant failed: You should not use <Route> outside a <Router> in Reactjs

Dung Do Tien Dec 19 2021 171

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.
  • A

    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.

  • M

    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.

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close