CODEWITHSUNDEEP
reactjsreact-router
moazzamjcodes
moazzamjcodes

Reputation: 180

Routing Issue In ReactJs

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

enter image description here

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

Upvotes: 0

Views: 454

Answers (1)

Vlatko Vlahek
Vlatko Vlahek

Reputation: 1899

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

Upvotes: 1

Related Questions