阵营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路由问题

回答

相关问题