React router v4

Hey!

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

routes.js

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>
        </Route>
      </Route>
      <Route path="/settings" component={Settings}/>
      <Route path="*" component={Settings}/>
    </Route>
  </Router>
)

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

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

<Route
	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} />
		</Switch>
	)}
/>

You still able to return the params.id, 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";

<Router>
   <MyCoolRoutes/>
</Router>

Try it. :slight_smile: