why router is undefined in react js?

Question

could you please tell me why router is undefined in react js .I already import react-router.js file in my codepen

here is my code http://codepen.io/naveennsit/pen/pymqPa?editors=1010

class App extends React.Component {

    render() {
        return <Router>
          <Route path='/' component={first}></Route>
         <Route path='/about' component={second}></Route>
        </Router>
    }

}

class second extends React.Component {

    render() {
        return <label>second component</label>
    }

}
class first extends React.Component {

    render() {
        return <label>first component</label>
    }

}

React.render( < App / > , document.getElementById('app'))

fvgs · Accepted Answer · 2016-05-18 10:58:09Z

1

Per the documentation, when you include the library via a <script> tag, the library will be available on window.ReactRouter.

You can add at the top of your file the following assignment:

{ Router } = ReactRouter;

This will expose the Router component from react-router to a variable Router, which is what your code expects.

edited May 18, 2016 at 10:58

answered May 18, 2016 at 10:26

fvgs

22.1k9 gold badges37 silver badges49 bronze badges

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

4 Comments

user944513 Over a year ago

please see my setting file .I imported that ,,

user944513 Over a year ago

but still it not display first component codepen.io/naveennsit/pen/KzLJqE?editors=1010

fvgs Over a year ago

It may be because you are trying to use the deprecated React.render() method instead of ReactDOM. See the docs for more info: facebook.github.io/react/docs/tutorial.html

fvgs Over a year ago

Please clarify above what error you're referring to.

Deepak Lalwani · Accepted Answer · 2019-01-03 14:14:54Z

1

You need to use BrowserRouter (react-router-dom) package instead of Router. Your code would look something like this :

<div>
<ReactRouter.Route path='/' component={first}></ReactRouter.Route>
<ReactRouter.Route path='/about' component={second}></ReactRouter.Route>
</div>

Also Notice div tag in ReactRouter otherwise you will get "A Router may have only one child element" error.

answered Jan 3, 2019 at 14:14

Deepak Lalwani

586 bronze badges

Comments

Andy · Accepted Answer · 2016-05-18 10:28:28Z

0

You may need to brace your returned JSX:

return (
  <Router>
    <Route path='/' component={first}></Route>
    <Route path='/about' component={second}></Route>
  </Router>
)

answered May 18, 2016 at 10:28

Andy

63.7k13 gold badges72 silver badges99 bronze badges

Comments

Nishanth Matha · Accepted Answer · 2016-05-18 12:34:52Z

0

You should initialise the aliases when script tag is dropped.

Try something like:

var Router  = window.ReactRouter;
var Route  = window.ReactRouter.Ruote;

At the beginning of your code

answered May 18, 2016 at 12:34

Nishanth Matha

6,0892 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

why router is undefined in react js?

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related