Реагировать Js Routing Выпуска

Question

я изучаю реакцию Js маршрутизации, но я получил ошибку:

импорта Реагировать из «реагирует»; Failed типа опоры: Invalid опора children поставляется Router.

[реагировать-маршрутизатор] Местоположение «/» не найдено ни одного маршрута

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

Пожалуйста, дайте мне знать, как ее решить.

Answer 1

Вы урожденная чтобы импортировать компонент реагировать

import React from 'react'; 

Answer 2

Здесь вы посмотрите на это может.

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

Answer 3

Использования Реагировать маршрутизатор v4

Вам нужно импортировать BrowserHistory из «реагировать маршрутизатор РОМ», если вы хотите использовать ссылки без «#» например. www.yourexample.com/about.

Вам необходимо импортировать Hashhistory из 'response router dom', если вы хотите использовать свои ссылки с '#' например. www.yourexample.com/#/about.

Также при использовании реакции маршрутизатора 4 необходимо импортировать {коммутатор} компонент из «реагировать маршрутизатора дом» для переключения между ссылками

Позвольте мне знать, если вам нужен полный рабочий пример использования реагировать маршрутизатору 4

Answer 4

Вы должны включить точное в свой маршрут по умолчанию.

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

Answer 5

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