反应路由器导航不起作用答案

【问题标题】：React router navigation does not work反应路由器导航不起作用
【发布时间】：2016-04-24 09:31:25
【问题描述】：

我已经在 ES6 中使用 react 路由器实现了一个 react JS 测试应用程序，但它似乎不起作用。下面的代码sn -p i：

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”似乎登陆了一个单独指示标题部分的页面。任何帮助表示赞赏。

【问题讨论】：

有什么方法可以向我们展示 Page1 组件？
@NaderDabit page1.js也在上面。

标签： reactjs ecmascript-6 react-router

【解决方案1】：

constructor 不执行任何操作时，您应该忽略它。默认构造函数是：

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

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

【讨论】：

感谢您的及时回复。我删除了所有构造函数，因为它什么也没做，但导航仍然不起作用。

【解决方案2】：

听起来您想在导航到 / 时呈现 page1 以显示？如果是这样，您需要 IndexRoute 的 docs seem to indicate 默认情况下将 / 路由到 page1：

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

【讨论】：

【解决方案3】：

我无法对此进行测试，但我认为如果不提供 历史记录，react-router 将无法读取 URL 位置。所以只渲染/ 路径是有意义的。

<Router history={browserHistory}>
...
</Router>

【讨论】：

我很确定，结合索引路由是解决方案。

【解决方案4】：

大多数答案都单独涉及这些，但我认为您需要结合索引路由、浏览器历史记录，并将您的导出变成这样的反应组件：

import { Router, browserHistory } from 'react-router'

const Routes = () => {
   return (
       <Router history={browserHistory}>
           <Route path="/" component={Home}>
               <IndexRoute component={Page1}/>
           </Route>
       </Router>
   )
}

export default Routes;

这应该对最新版本的 React Router (2.0.0-rc5) 有效

【讨论】：