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, Aug 18 '17 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. — moazzam, Aug 18 '17 at 12:19
can you answer @Shubham's question? The version of your react-router. — abdul, Aug 18 '17 at 12:23
With the errors that you are getting, I guess, you are using react-router v4. Refer this answer on how to configure your routes when you use nested routes https://stackoverflow.com/questions/44452858/specify-child-routes-in-react-router-v4/44453559#44453559 — Shubham Khatri, Aug 18 '17 at 12:25
I don't know why you're using react-router for MPA. Assuming that you want to use react-router anyway I added my answer. — madhurgarg, Aug 18 '17 at 12:33
Can you please explain what's so surprising about using react router in this case @madhurgarg ? — Kristupas Repečka, Aug 18 '17 at 12:55
@KristupasRepečka There is no need to use react-router in Multipage App. — madhurgarg, Aug 18 '17 at 12:56
@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, Aug 18 '17 at 13:05
@KristupasRepečka I am not saying SPA should have only one route. I am saying if you want to create multipage app, you don't need react-router, you can simply serve your html files using express server on frontend. — madhurgarg, Aug 18 '17 at 13:09
Since you asked, regardless of the merit of using routing in your case, it appears you need an actual TYPE of router. For instance, a `BrowserRouter` in v4 or older: ``. There is no `history` yet which is why `location` does not exist either. — jeremiah.trein, Aug 18 '17 at 13:09
@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, Aug 18 '17 at 13:13

score 1 · Answer 1 · edited Aug 19 '17 at 15:59

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 }`.'
)

Ignored by browserHistory, as the purpose of browserHistory is to create browserHistory. What do you mean with A is A and creates A? — punkbit, Aug 26 '17 at 11:12

Routing Issue In ReactJs

1 Answers1