Question

为什么当我在路由器中提供路线时一切都很好但是当我编写如下路线时我得到了

warning.js:36 Warning: Failed prop type: Invalid prop个孩子supplied to路由器. in Router (at index.js:62) in Root (at index.js:70)

和

browser.js:49 Warning: [react-router] Location "/contact" did not match any routes

import React, { PropTypes, Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';

class Navigation extends Component {
  render() {
    return (
      <div>
        <ul>
          <li><Link to='/'>Main</Link></li>
          <li><Link to='/about'>About</Link></li>
          <li><Link to='/contact'>Contact</Link></li>
        </ul>
      </div>
    );
  }
};

class Contact extends Component {
  render() {
    return <div>Contact</div>;
  }
}

class About extends Component {
  render() {
    return ( <div>About</div> );
  }
}

class Home extends Component {
  render() {
    return <div>Home</div>;
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <Navigation />
        {this.props.children}
      </div>
    );
  }
}


const routes = () => (
  <Route path='/' component={App}>
    <IndexRoute component={Home} />
    <Route path='about' component={About} />
    <Route path='contact' component={Contact} />
  </Route>
)

export default class Root extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        {routes}
      </Router>
    );
  }
}

ReactDOM.render(
  <Root  />,
  document.getElementById('root')
)

我已经尝试了所有变化。是否有可能撰写路线？任何帮助赞赏。

Answer 1

export default class Root extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        {routes()}
      </Router>
    );
  }
}

反应路由器 - 在编写路由时提供给“路由器”的无效道具`children`

1 个答案: