react router v 4 0 0 Uncaught TypeError Cannot read property location of undefined

Question

I ve been having some trouble with react router  i m using version 4 0 0    this is my index js  import React from  react   import ReactDOM from  react-dom   import App from    App   import    index css   import   Router  Route  Link  browserHistory   from  react-router     ReactDOM render     lt Router history  browserHistory   gt       lt Route path     component  App    gt      lt  Router gt     document getElementById  root        the App js is just anything  i m posting the basic one here  cause it s not the problem  i believe    import React    Component   from  react   import logo from    logo svg   import    App css    class App extends Component     render         return          lt div className  App  gt           lt div className  App-header  gt             lt img src  logo  className  App-logo  alt  logo    gt             lt h2 gt Welcome to React lt  h2 gt           lt  div gt           lt p className  App-intro  gt            To get started  edit  lt code gt src App js lt  code gt  and save to reload           lt  p gt         lt  div gt                export default App    and this is what happens when i check the console log  Router js 43 Uncaught TypeError  Cannot read property  location  of undefined     at new Router  Router js 43      at ReactCompositeComponent js 295     at measureLifeCyclePerf  ReactCompositeComponent js 75      at ReactCompositeComponentWrapper  constructComponentWithoutOwner  ReactCompositeComponent js 294      at ReactCompositeComponentWrapper  constructComponent  ReactCompositeComponent js 280      at ReactCompositeComponentWrapper mountComponent  ReactCompositeComponent js 188      at Object mountComponent  ReactReconciler js 46      at ReactCompositeComponentWrapper performInitialMount  ReactCompositeComponent js 371      at ReactCompositeComponentWrapper mountComponent  ReactCompositeComponent js 258      at Object mountComponent  ReactReconciler js 46    oh  and this is the package json just in case       name    teste2      version    0 1 0      private   true     dependencies          react     15 4 2        react-dom     15 4 2        react-router     4 0 0          devDependencies          react-scripts    0 9 5          scripts          start    react-scripts start        build    react-scripts build        test    react-scripts test --env jsdom        eject    react-scripts eject          i ve been checking this on other places  but i didn t find a way to solve it    Thank you guys very much for your patience and help

User · Answer

Replace   import   Router  Route  Link  browserHistory   from  react-router     With   import   BrowserRouter as Router  Route   from  react-router-dom     It will start working  It is because react-router-dom exports BrowserRouter

User · Answer

You re doing a few things wrong    First  browserHistory isn t a thing in V4  so you can remove that  Second  you re importing everything from react-router  it should be react-router-dom  Third  react-router-dom doesn t export a Router  instead  it exports a BrowserRouter so you need to import   BrowserRouter as Router   from  react-router-dom    Looks like you just took your V3 app and expected it to work with v4  which isn t a great idea

User · Answer

so if you need  want use this code   import   useRoutes   from  quot   routes quot    import   BrowserRouter as Router   from  quot react-router-dom quot    export const App        gt     const routes   useRoutes true      return         lt Router gt          lt div className  quot container quot  gt  routes  lt  div gt        lt  Router gt                  routes js   import   Switch  Route  Redirect   from  quot react-router-dom quot    export const useRoutes    isAuthenticated    gt      if  isAuthenticated        return          lt Switch gt           lt Route path  quot  links quot  exact gt             lt LinksPage   gt           lt  Route gt           lt Route path  quot  create quot  exact gt             lt CreatePage   gt           lt  Route gt           lt Route path  quot  detail  id quot  gt             lt DetailPage   gt           lt  Route gt           lt Redirect path  quot  create quot    gt         lt  Switch gt               return        lt Switch gt         lt Route path   quot   quot   exact gt           lt AuthPage   gt         lt  Route gt         lt Redirect path   quot   quot     gt       lt  Switch gt

User · Answer

I ve tried everything suggested here but didn t work for me  So in case I can help anyone with a similar issue  every single tutorial I ve checked is not updated to work with version 4   Here is what I ve done to make it work  import React from  react   import App from    App    import ReactDOM from  react-dom   import       HashRouter      Route   from  react-router-dom      ReactDOM render            lt HashRouter gt               lt div gt                   lt Route path     render      gt  lt App items  temasArray   gt    gt               lt  div gt           lt  HashRouter  gt         document getElementById  root       That s the only way I have managed to make it work without any errors or warnings    In case you want to pass props to your component for me the easiest way is this one     lt Route path     render      gt  lt App items  temasArray   gt    gt

[javascript] react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined

Examples related to javascript

Examples related to json

Examples related to reactjs

Examples related to react-router