CODEWITHSUNDEEP
reactjsreact-router
Ayan Sundar Jana
Ayan Sundar Jana

Reputation: 11

React js routing issue

I am exploring react js routing but I got an error:

import React from 'react';Failed prop type: Invalid prop children supplied to Router.

[react-router] Location "/" did not match any routes

import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'

class App extends React.Component {
   render() {
     return ( < div >
      < ul >
      < li > Home < /li> < li > About < /li > < li > Contact < /li></ul >
      { this.props.children } < /div>)
    }
}



class Home extends React.Component {
  render() {
    return ( < div >
    < h1 > Home... < /h1> < /div > )
  }
}



class About extends React.Component {
  render() {
   return ( < div >
   < h1 > About... < /h1> < /div >)
  }
}



class Contact extends React.Component {
  render() {
    return ( < div >
    < h1 > Contact... < /h1> < /div > )
  }
}



ReactDOM.render(( < Router history = { browserHistory } >
  < Route path = "/" component = { App } >
    < IndexRoute component = { Home } /> 
    < Route path = "home" component = { Home } />
    < Route path = "about" component = { About }/>
    < Route path = "contact" component = { Contact }/>
  < /Route >
 < /Router>),
document.getElementById('root'))

Please let me know how to solve it.

Upvotes: 0

Views: 2031

Answers (6)

Andysenclave
Andysenclave

Reputation: 37

With react router 4, you need to wrap your routes inside a BrowserHistory or HashHistory component from ‘react-router-dom’.

Upvotes: 0

Vineet Kumar
Vineet Kumar

Reputation: 187

You can use latest React Router which is react-router-dom and implement it in this way : 

//importing react-router-dom
import { BrowserRouter as Router, Route } from 'react-router-dom';

//make a separate router file and export the following const Route
//make sure you import Home and About components
const Routes = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
    </div>
  </Router>
)

//then in your entry file, write code like this:

//import Routes
import Routes from './config/routes';

//then render Routes using ReactDom's render method
ReactDOM.render(<Routes />, document.getElementById('root'));

Upvotes: 0

pintu soliya
pintu soliya

Reputation: 1

You Have to Include exact in your by default Route.

< Route exact path = "/" component = { App } >

Upvotes: 0

Vinit S
Vinit S

Reputation: 69

Using React Router v4

You need to import BrowserHistory from 'react router dom' if you want to use your links without '#' eg. www.yourexample.com/about.

You need to import Hashhistory from 'react router dom' if you want to use your links with '#' eg. www.yourexample.com/#/about.

Also if using react Router 4 you need to import {Switch} component from 'react router dom' to switch between links

Let me know if you needed full working example using react router 4

Upvotes: 1

Dinesh Katwal
Dinesh Katwal

Reputation: 960

Here you can take a look at this.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'

class App extends Component {
   render() {
     return ( <div>
      <ul>
      <li> Home < /li> < li > About < /li > < li > Contact < /li></ul >
      { this.props.children } < /div>)
    }
}
class Home extends Component {
  render() {
    return ( < div >
    < h1 > Home... < /h1> < /div > )
  }
}



class About extends Component {
  render() {
   return ( < div >
   < h1 > About... < /h1> < /div >)
  }
}

class Contact extends Component {
  render() {
    return ( < div >
    < h1 > Contact... < /h1> < /div > )
  }
}

ReactDOM.render(( < Router history = { browserHistory } >
  < Route path ="/" component = { App } >
    < IndexRoute component ={ Home } />
    < Route path = "home" component={ Home } />
    < Route path = "about" component={ About }/>
    < Route path = "contact" component = { Contact }/>
  < /Route >
 < /Router>),
document.getElementById('app'));

Upvotes: 0

David Adelekan
David Adelekan

Reputation: 47

You nee to import the react component

import React from 'react';

Upvotes: 0

Related Questions