react-router与他们自己的文件中的组件

时间:2017-01-13 00:17:20

标签: javascript reactjs web react-router

我正在使用react进行Web应用程序,并且在react-router方面遇到了一些问题。根据我阅读的教程,我可以使用this.props.router访问版本3.0.0中的路由器,并以编程方式更改位置this.props.router.push('/home')

不幸的是,在所有这些教程中,所有组件都在同一个文件中。但是,我的结构是将每个组件都放在自己的文件中。 路由器在index.js文件中定义。

/src
   /pages
      Home.js
      Landingpage.js
index.js

以上是我项目结构的相关部分。以下是我的index.js文件的代码

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Landingpage from './pages/Landingpage'
import Home from './pages/Home'
import {
    Router,
    Route,
    IndexRoute,
    IndexLink,
    Link,
    browserHistory } from 'react-router';
import './index.css';


ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Landingpage}/>
            <Route path="home" component={Home}/>
        </Route>
    </Router>,
  document.getElementById('root')
);

我想要的是访问我/pages目录中文件中的上述路由器实例。我尝试了各种教程中的几种方法,例如在withRouter(componentName)文件中使用index.js

提前致谢

0 个答案:

没有答案