陣營JS路由問題

我探索反應JS路由，但我得到了一個錯誤：陣營JS路由問題

進口從「反應」反應;失敗道具類型：提供給Router無效道具children。

[反應路由器]的位置「/」沒有匹配的路由

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

請讓我知道如何解決這個問題。

來源

2017-01-16 Ayan Sundar Jana

沒有什麼明顯的錯誤與如何創建路由器。你能發佈一個更完整的例子來證明這個問題嗎？ –

我已經添加完成代碼。是否有任何版本問題？ –

你的東東導入反應成分

import React from 'react';

來源

2017-01-16 16:11:28

在這裏你可以看看這個。

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

來源

2017-03-15 15:25:57

使用陣營路由器V4

你需要從導入BrowserHistory「反應路由器DOM」，如果你想用你的鏈接沒有「＃」如。 www.yourexample.com/about。

如果你想使用你的鏈接'＃' 例如你需要從'react router dom'導入Hashhistory。 www.yourexample.com/#/about。

此外，如果使用反應路由器4 需要導入從{開關}組件的反應路由器DOM「，以鏈接之間切換

讓我知道，如果你使用的反應路由器4

來源

2017-06-16 03:40:33

需要全面工作示例你必須在默認路由中包含你的確切信息。

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

來源

2017-08-19 12:22:37

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

來源

2017-11-06 12:51:22

陣營JS路由問題

回答

相關問題