Routing problem in React-JS / react-router-dom

Question

I installed the react-router on my project via run the following code snippet in the command prompt window:

npm install react-router

I found out that react-router installed successfully because there was no error on installing and also the output was:

[email protected] updated 1 package in 19.53s

Based on a tutorial, I set my Index.js like the following code:

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>
), document.getElementById('app'))

Now when I want to compile/build my application, these error occurs:

./src/index.js
  Line 14:  'Router' is not defined          react/jsx-no-undef
  Line 14:  'browserHistory' is not defined  no-undef
  Line 15:  'Route' is not defined           react/jsx-no-undef
  Line 16:  'IndexRoute' is not defined      react/jsx-no-undef
  Line 17:  'Route' is not defined           react/jsx-no-undef
  Line 18:  'Route' is not defined           react/jsx-no-undef
  Line 19:  'Route' is not defined           react/jsx-no-undef

I know the compiler couldn't find the routing classes, and I have searched for problems like my issue on google and this community, but actually my search result was not helpful. Thank you for your responding.

Hemadri Dasari · Accepted Answer · 2018-10-12 05:12:23Z

5

You need to import Router, Route and in index.js file before you call them like

 import { Router, Route } from "react-router";

IndexRoute is not supported in React-Router v4 instead you can use Route with exact in place of IndexRoute like

  <Route exact path={path} component={Component} />

Edit:

browserHistory is not supported in react-router v4 so there is alternate solution for that check here https://github.com/ReactTraining/react-router/blob/25776d4dc89b8fb2f575884749766355992116b5/packages/react-router/docs/guides/migrating.md#the-router

edited Oct 12, 2018 at 5:12

answered Oct 12, 2018 at 4:46

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Siavash Over a year ago

6 of my errors solved but I have problem with RouterIndex : "Failed to compile. ./src/index.js Attempted import error: 'IndexRoute' is not exported from 'react-router'."

Hemadri Dasari Over a year ago

Hey IndexRoute seems removed in React-Router v4 so check my updated solution for alternate

Siavash Over a year ago

Thank you, I replaced Router with 'exact' attribute with IndexRouter and my problem solved, but what about the browingHistory ? is it not supported in React-Router v4 ? because I have problem with too : "./src/index.js Attempted import error: 'browserHistory' is not exported from 'react-router'."

Hemadri Dasari Over a year ago

You are welcome. I have updated my answer please check

Collectives™ on Stack Overflow

Routing problem in React-JS / react-router-dom

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related