反应js路由问题答案

【问题标题】：React js routing issue反应js路由问题
【发布时间】：2017-01-16 14:55:54
【问题描述】：

我正在探索 react js 路由，但出现错误：

import React from 'react'；失败的道具类型：无效的道具children提供给Router。

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

请告诉我如何解决。

【问题讨论】：

路由器的创建方式没有明显的问题。你能发布一个更完整的例子来说明这个问题吗？
我已经添加了完整的代码，还有版本问题吗？

标签： reactjs react-router

【解决方案1】：

使用 React Router v4

如果您想使用不带“#”的链接，则需要从“react router dom”导入 BrowserHistory 例如。 www.yourexample.com/about。

如果您想使用带有 '#' 的链接，您需要从 'react router dom' 导入 Hashhistory 例如。 www.yourexample.com/#/about.

如果使用 react 路由器 4 您需要从“react router dom”导入 {Switch} 组件以在链接之间切换

如果您需要使用反应路由器 4 的完整工作示例，请告诉我

【讨论】：

【解决方案2】：

你需要导入 react 组件

import React from 'react';

【讨论】：

【解决方案3】：

在这里你可以看看这个。

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

【讨论】：

【解决方案4】：

您必须在您的默认路线中准确包含。

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

【讨论】：

【解决方案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'));

【讨论】：

【解决方案6】：

使用 react-router 4，您需要将路由包装在来自“react-router-dom”的 BrowserHistory 或 HashHistory 组件中。

【讨论】：