Routing Issue In ReactJs

Question

I am a beginner in ReactJs. I am trying to create a multipage app, but I'm facing issues related to routing.

This is the code:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route} from 'react-router';

......

ReactDOM.render((
    <Router>
        <Route path="/" component={My}>
            <Route path="home" component={Home}>
               <Route path="contact" component={Contact}/>
               <Route path="about" component={About}/>
            </Route>
        </Route>

    </Router>
), document.getElementById('root'))

@moazzam Why are you using React router when you want to create multipage app? — madhurgarg
– madhurgarg, Commented Aug 18, 2017 at 12:14
@madhurgarg if i am going towards wrong direction then can you please make my correction ? I visited different blogs and tutorials and they did something like this. — moazzamjcodes
– moazzamjcodes, Commented Aug 18, 2017 at 12:19
@madhurgarg Your argument is meaningless unless you explain reasoning behind it. That's what react router is for - helping create single page applications with artificial routes which are convenient for user to bookmark and etc. SPA does not mean that the application should only have one route. Please. — Kristupas Repečka
– Kristupas Repečka, Commented Aug 18, 2017 at 13:05
@madhurgarg But that's completely different thing. It is obvious author is not creating production webapp, rather he's learning reactjs :) Peace — Kristupas Repečka
– Kristupas Repečka, Commented Aug 18, 2017 at 13:13

Arnaud Boeglin · Accepted Answer · 2017-08-19 15:59:39Z

1

It seems that your React router is expecting a history prop that you haven't provided. Here is an example for Router v4 which doesn't support route nesting as in the question example.

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'

  ReactDOM.render((
    <BrowserRouter>
      <div className='App'>
        <div className='Page'>
          <Switch>
              <Route exact path="/" component={1} />
              <Route path="/second-page" component={2} />
              <Route path="/third-page" component={3} />
              <Route component={ErrorPage} />
          </Switch>
        </div>
      </div>
  </BrowserRouter>
), document.getElementById('root'))

This one would route your components per their respective paths, or return an ErrorPage component if no routes were matched.

Edit: actually the history prop is useless and will be ignored in BrowserHistory, as the purpose of BrowserHistory is mostly to create a browserHistory.

from the source code :

warning(
     !this.props.history,
     '<BrowserRouter> ignores the history prop. To use a custom history, ' +
     'use `import { Router }` instead of `import { BrowserRouter as Router }`.'
)

edited Aug 19, 2017 at 15:59

Arnaud Boeglin

7736 silver badges13 bronze badges

answered Aug 18, 2017 at 13:06

Vlatko Vlahek

1,88915 silver badges21 bronze badges

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

1 Comment

punkbit Over a year ago

Ignored by browserHistory, as the purpose of browserHistory is to create browserHistory. What do you mean with A is A and creates A?

Collectives™ on Stack Overflow

Routing Issue In ReactJs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related