I'm working on a web application using react and have some problems with react-router. According to the tutorials I read I can access the router in version 3.0.0 with this.props.router and programmatically change the location with this.props.router.push('/home') for example.
In all those tutorials unfortunately, all the components are in the same file. However, my structure is to have every component in its own file. The router is defined in the index.js file.
/src
/pages
Home.js
Landingpage.js
Results.js
index.js
Above is the relevant part of my project structure. The following is the code of my index.js file
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')
);
What I want is to access the above router instance in the files in my /pages directory. I tried several ways from the various tutorials, for example use withRouter(componentName) in the index.js file.
Thanks in advance
Aucun commentaire:
Enregistrer un commentaire