Question

我正在探索反应js路由，但我收到了一个错误：

导入React来自＆＃39;反应＆＃39 ;;失败道具类型：提供给children的道具Router无效。

[react-router]位置＆＃34; /＆＃34;没有匹配任何路线

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

使用React Router v4

您需要从＆＃39; react router dom＆＃39;中导入BrowserHistory。如果你想在没有＆＃39;＃＆＃39;的情况下使用你的链接例如。 www.yourexample.com/about。

你需要从反应路由器dom＆＃39;导入Hashhistory。如果你想使用你的链接＆＃39;＃＆＃39; 例如。 www.yourexample.com /＃/约

此外，如果使用反应路由器4 您需要从＆＃39; react router dom＆＃39;中导入{Switch}组件。在链接之间切换

如果您需要使用react router 4

的完整工作示例，请告诉我

Answer 2

您需要导入反应组件

import React from 'react';

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

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

Answer 6

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

反应js路由问题

6 个答案: