why router is undefined in react js?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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'))

edited May 18 '16 at 10:26

Cherniv

29.5k10105132

asked May 18 '16 at 10:23

user944513

3,4781463128

add a comment |

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'))

edited May 18 '16 at 10:26

Cherniv

29.5k10105132

asked May 18 '16 at 10:23

user944513

3,4781463128

add a comment |

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'))

edited May 18 '16 at 10:26

Cherniv

29.5k10105132

asked May 18 '16 at 10:23

user944513

3,4781463128

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'))

javascript reactjs

edited May 18 '16 at 10:26

Cherniv

29.5k10105132

asked May 18 '16 at 10:23

user944513

3,4781463128

edited May 18 '16 at 10:26

Cherniv

29.5k10105132

asked May 18 '16 at 10:23

user944513

3,4781463128

edited May 18 '16 at 10:26

Cherniv

29.5k10105132

edited May 18 '16 at 10:26

Cherniv

29.5k10105132

edited May 18 '16 at 10:26

Cherniv

29.5k10105132

asked May 18 '16 at 10:23

user944513

3,4781463128

asked May 18 '16 at 10:23

user944513

3,4781463128

asked May 18 '16 at 10:23

user944513

3,4781463128

add a comment |

4 Answers
4

active

oldest

votes

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 at 14:14

Deepak Lalwani

111

add a comment |

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 '16 at 10:28

Andy

30.5k73565

still giving the same error

– user944513
May 18 '16 at 10:29

do you have any idea ..how to remove this error

– user944513
May 18 '16 at 10:35

add a comment |

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 '16 at 10:58

answered May 18 '16 at 10:26

fvgs

9,34572542

please see my setting file .I imported that ,,

– user944513
May 18 '16 at 10:27

please remove your error

– user944513
May 18 '16 at 10:35

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

– user944513
May 18 '16 at 10:39

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
May 18 '16 at 10:55

Please clarify above what error you're referring to.

– fvgs
May 18 '16 at 10:58

add a comment |

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 '16 at 12:34

Nishanth Matha

4,60211226

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f37296784%2fwhy-router-is-undefined-in-react-js%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

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 at 14:14

Deepak Lalwani

111

add a comment |

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 at 14:14

Deepak Lalwani

111

add a comment |

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 at 14:14

Deepak Lalwani

111

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 at 14:14

Deepak Lalwani

111

answered Jan 3 at 14:14

Deepak Lalwani

111

answered Jan 3 at 14:14

Deepak Lalwani

111

answered Jan 3 at 14:14

Deepak Lalwani

111

add a comment |

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 '16 at 10:28

Andy

30.5k73565

still giving the same error

– user944513
May 18 '16 at 10:29

do you have any idea ..how to remove this error

– user944513
May 18 '16 at 10:35

add a comment |

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 '16 at 10:28

Andy

30.5k73565

still giving the same error

– user944513
May 18 '16 at 10:29

do you have any idea ..how to remove this error

– user944513
May 18 '16 at 10:35

add a comment |

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 '16 at 10:28

Andy

30.5k73565

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 '16 at 10:28

Andy

30.5k73565

answered May 18 '16 at 10:28

Andy

30.5k73565

answered May 18 '16 at 10:28

Andy

30.5k73565

answered May 18 '16 at 10:28

Andy

30.5k73565

still giving the same error

– user944513
May 18 '16 at 10:29

do you have any idea ..how to remove this error

– user944513
May 18 '16 at 10:35

add a comment |

still giving the same error

– user944513
May 18 '16 at 10:29

do you have any idea ..how to remove this error

– user944513
May 18 '16 at 10:35

still giving the same error

– user944513
May 18 '16 at 10:29

do you have any idea ..how to remove this error

– user944513
May 18 '16 at 10:35

add a comment |

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 '16 at 10:58

answered May 18 '16 at 10:26

fvgs

9,34572542

please see my setting file .I imported that ,,

– user944513
May 18 '16 at 10:27

please remove your error

– user944513
May 18 '16 at 10:35

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

– user944513
May 18 '16 at 10:39

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
May 18 '16 at 10:55

Please clarify above what error you're referring to.

– fvgs
May 18 '16 at 10:58

add a comment |

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 '16 at 10:58

answered May 18 '16 at 10:26

fvgs

9,34572542

please see my setting file .I imported that ,,

– user944513
May 18 '16 at 10:27

please remove your error

– user944513
May 18 '16 at 10:35

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

– user944513
May 18 '16 at 10:39

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
May 18 '16 at 10:55

Please clarify above what error you're referring to.

– fvgs
May 18 '16 at 10:58

add a comment |

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 '16 at 10:58

answered May 18 '16 at 10:26

fvgs

9,34572542

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 '16 at 10:58

answered May 18 '16 at 10:26

fvgs

9,34572542

edited May 18 '16 at 10:58

answered May 18 '16 at 10:26

fvgs

9,34572542

answered May 18 '16 at 10:26

fvgs

9,34572542

answered May 18 '16 at 10:26

fvgs

9,34572542

please see my setting file .I imported that ,,

– user944513
May 18 '16 at 10:27

please remove your error

– user944513
May 18 '16 at 10:35

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

– user944513
May 18 '16 at 10:39

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
May 18 '16 at 10:55

Please clarify above what error you're referring to.

– fvgs
May 18 '16 at 10:58

add a comment |

please see my setting file .I imported that ,,

– user944513
May 18 '16 at 10:27

please remove your error

– user944513
May 18 '16 at 10:35

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

– user944513
May 18 '16 at 10:39

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
May 18 '16 at 10:55

Please clarify above what error you're referring to.

– fvgs
May 18 '16 at 10:58

please see my setting file .I imported that ,,

– user944513
May 18 '16 at 10:27

please remove your error

– user944513
May 18 '16 at 10:35

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

– user944513
May 18 '16 at 10:39

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
May 18 '16 at 10:55

Please clarify above what error you're referring to.

– fvgs
May 18 '16 at 10:58

add a comment |

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 '16 at 12:34

Nishanth Matha

4,60211226

add a comment |

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 '16 at 12:34

Nishanth Matha

4,60211226

add a comment |

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 '16 at 12:34

Nishanth Matha

4,60211226

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 '16 at 12:34

Nishanth Matha

4,60211226

answered May 18 '16 at 12:34

Nishanth Matha

4,60211226

answered May 18 '16 at 12:34

Nishanth Matha

4,60211226

answered May 18 '16 at 12:34

Nishanth Matha

4,60211226

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu