CODEWITHSUNDEEP
reactjsmeteorreact-routerreact-router-v4
cala
cala

Reputation: 1421

React Router v4 not displaying components

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.

Upvotes: 0

Views: 1789

Answers (1)

Tyler McGinnis
Tyler McGinnis

Reputation: 35276

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

Upvotes: 2

Related Questions