React router v4


I’ve been using react-router with meteor like this for a while. but since the upgrade to version 4, this is no longer working. Ive been googling but having a hard time figuring out how to update this code and get it working again


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

// route components
import App from '../ui/App.jsx';
import Settings from '../ui//Settings/Settings.jsx';
import Recipe from '../ui/Recipe/Recipe.jsx';

export const renderRoutes = () => (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="/r" component={Recipe}>
        <Route path="/r/:username" component={Recipe}>
          <Route path="/r/:username/:recipe" component={Recipe}>
            <Route path="/r/:username/:recipe/:edit" component={Recipe}/>
      <Route path="/settings" component={Settings}/>
      <Route path="*" component={Settings}/>

Check this out… This is how my routes are managed now…

* routes.js exported as <MyCoolRoutes/>
import { Router, Route, Switch, withRouter } from "react-router";

	render={({ location }) => (
		<Switch key={location.key} location={location}>
				<Route exact path="/" component={A} />
				<Route path="/a/t" component={A} />
				<Route path="/a/n" component={NA} />
				<Route path="/c/t" component={C} />
				<Route path="/c/n" component={NC} />
				<Route path="/p/t" component={P} />
				<Route path="/p/n" component={NP} />
                <Route path="/p/u/:id" component={NPId} />

You still able to return the, in your case params.edit (username, recipe).

REMEMBER: You are not anymore able to use this.props.child… your index.js now should contain

* index.js / main.js / app.js (wherever)
import { BrowserRouter as Router } from "react-router-dom";


Try it. :slight_smile: