Trouble getting react router working

1

Hello, I’ve recently started working on the Camper Leaderboard, but I can’t manage to get react-router working.

I’ve defined a routes.js file which looks like this:

import React from 'react';
import { Router, Route } from 'react-router';

import App from './components/App';
import AllTime from './components/AllTime';
import NotFound from './components/NotFound';

const Routes = (props) => (
  <Router {...props}>
    <Route path="/" component={App}>
      <Route path="/alltime" component={AllTime} />
      <Route path="*" component={NotFound} />
    </Route>
  </Router>
);

export default Routes;

And my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router';

import Routes from './routes';
import './index.css';

ReactDOM.render(
  <Routes history={browserHistory} />,
  document.getElementById('root')
);

And my components:

import React from 'react';

const AllTime = (props) => {
  return (
    <span>Hey there</span>
  );
}

export default AllTime;

import React, { Component } from 'react';
import { Link } from 'react-router';

import { fetchRecent, fetchAllTime } from '../api';

export default class App extends Component {
  render() {
    return (
      <div>
        I do nothing, yet
        <Link to="/alltime">AllTime</Link>
      </div>
    );
  }
}

But when I click on the link, nothing happens. The URL changes, but the component doesn’t, do you have any ideas?

Thanks for your time and help :slight_smile:

2

Hello. You need add {this.props.children} in your App element for nested routes.

export default class App extends Component {
  render() {
    return (
      <div>
        I do nothing, yet
        <Link to="/alltime">AllTime</Link>
        {this.props.children}
      </div>
    );
  }
}
1 Like