Router Relay Navigation Does Not Work

Question

I applied a test application to react JS with a responsive router in ES6, but it does not work. Below is a snippet of code below:

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> ); } } 

Going to "/" and "/ page1" seems to get on a page denoting only the title. Any help was appreciated.

Answer 1

Looks like you want to display page1 to go to / ? If so, the docs seem to indicate that you need IndexRoute to have a / route to page1 by default:

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

Answer 2

I was not able to verify this, but I think that without providing a history , the reaction router will not be able to read the location of the URL. Therefore, it would be advisable to display only the path / .

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

Answer 3

You must leave the constructor when it does nothing. Default constructor:

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

Thus, implicit argument arguments are not passed to the Home component.

Answer 4

Most of the answers affect them individually, but I think you need to combine the index route, browser history and turn your export into a responsive component as follows:

 import { Router, browserHistory } from 'react-router' const Routes = () => { return ( <Router history={browserHistory}> <Route path="/" component={Home}> <IndexRoute component={Page1}/> </Route> </Router> ) } export default Routes; 

This should be relevant for the latest version of React Router (2.0.0-rc5)