React路由器导航不起作用

Question

我已经在ES6中使用react路由器实现了一个反应JS测试应用程序,但它似乎没有用.我的代码片段如下:

app.js
-------

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';

ReactDOM.render(Routes, document.getElementById('react-container'));

routes.js
---------

import React from 'react';
import { DefaultRoute, Link, Route, RouteHandler,Router } from 'react-router';
import Page1 from './page1';
import Home from './home';
import { IndexRoute } from 'react-router';

let routes = 
  <Router>
    <Route path="/" component={Home}>
      <Route path="page1" component={ Page1 }/>
    </Route>
  </Router>

export default routes

home.js
-------

import React, { Component } from 'react';
import Header from './components/header';

export default class Home extends Component {
  constructor() {
    super();
  } 

  render() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }
}

page1.js
--------

import React, { Component } from 'react';

export default class Page1 extends Component {
  constructor() {
    super();
  } 

  render() {
    return (
      <div>
        <h1> Page 1 </h1>
      </div>
    );
  }
}

导航到"/"和"/ page1"似乎落在指示标题部分的页面中.任何帮助赞赏.

Answer 1

听起来你想要渲染page1到导航时出现/？如果是这样,文档似乎表明您需要一个IndexRoute 默认/路由到page1:

let routes = (
  <Router>
    <Route path="/" component={Home}>
      <IndexRoute component={Page1} />
    </Route>
  </Router>
);

Answer 2

constructor 当它没有做任何事情时，你应该忽略它。默认构造函数是：

constructor(...args) {
  super(...args);
}

因此隐式 props 参数不会传递到Home组件中。