React Router v4 not displaying components

Question

The component is not been displayed when I navigate to localhost:3000/signup Is it because react router is updated to v4 and they way you route in react has now changed?

I have my main.js file

import Signup from '../imports/ui/Signup';

import
const routes = (
  <Router history={browserHistory}>
    <Route path="/signup" component={Signup}/>
  </Router>
);

Signup component

import React from 'react';

export default class Signup extends React.Component {
  render() {
    return <p>Signup</p>
  }
}

I'm using react router v4, also using Meteor.

Possible duplicate of [Programmatically navigate using react router V4](http://stackoverflow.com/questions/42123261/programmatically-navigate-using-react-router-v4) — Dez, Apr 04 '17 at 15:48
@Dez thanks. So can I just install react-router-dom now with react-router v4 and the code should still work? — cala, Apr 04 '17 at 15:49
I switched to react-router v3 and it's working perfect with code above. — cala, Apr 04 '17 at 16:05

score 2 · Accepted Answer · answered Apr 04 '17 at 16:09

React Router v4 is a re-write of React Router so you'll have to read the new API and adjust your code accordingly. I suggest going through all the examples which can be found here. Here's the basic example that looks similar to your code. The biggest thing you'll notice is you no longer have a centralized route config. Instead, you render `` s dynamically when you need them.

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

export default BasicExample

Thank you Tyler, I will give this a go. It's alot different to v3. — cala, Apr 04 '17 at 16:16
You're very welcome. It is quite different and will take some time to get used to, but once you're used to it, I think you'll love it. Feel free to reach out if you get stuck. — Tyler McGinnis, Apr 04 '17 at 16:17

React Router v4 not displaying components

1 Answers1