create-react-app error

[ghost]

I implemented the readme example in a create-react-app application I created today and compilation gives me this error :

You should not use < Route > or withRouter() outside a < Router >

this is the component :

import React, { Component } from 'react';
import './App.css';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';
import Home from './components/Home';
import Studies from './components/Studies';
import Experiences from './components/Experiences';
import Skills from './components/Skills';
import Hobbies from './components/Hobbies';
import { AnimatedSwitch } from 'react-router-transition';

const App = ({ data }) => (
        <AnimatedSwitch
            atEnter={{ opacity: 0 }}
            atLeave={{ opacity: 0 }}
            atActive={{ opacity: 1 }}
            className="switch-wrapper">
            <div>
                <ul>
                    <li><Link to="/">Accueil</Link></li>
                    <li><Link to="/studies">Etudes</Link></li>
                    <li><Link to="/experiences">Expériences</Link></li>
                    <li><Link to="/skills">Competences</Link></li>
                    <li><Link to="/hobbies">Loisirs</Link></li>
                </ul>
                <Route exact path="/" render={(props) => (<Home home={data.home} {...props}/>)}/>
                <Route path="/studies" render={(props) => (<Studies studies={data.studies} {...props}/>)}/>
                <Route path="/experiences" render={(props) => (<Experiences experiences={data.experiences} {...props}/>)}/>
                <Route path="/skills" render={(props) => (<Skills skills={data.skills} {...props}/>)}/>
                <Route path="/hobbies" render={(props) => (<Hobbies hobbies={data.hobbies} {...props}/>)}/>
            </div>
        </AnimatedSwitch>
);
export default App;

Am i missing something?

[maisano]

hi @Ctaque!

it looks as though you're missing a <Router> instance in your application tree; in your code, on line four, you are importing BrowserRouter as Router,–you just need to add that to you app. something like this should work:

const App = ({ data }) => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Accueil</Link></li>
        <li><Link to="/studies">Etudes</Link></li>
        <li><Link to="/experiences">Expériences</Link></li>
        <li><Link to="/skills">Competences</Link></li>
        <li><Link to="/hobbies">Loisirs</Link></li>
      </ul>
      <AnimatedSwitch
        atEnter={{ opacity: 0 }}
        atLeave={{ opacity: 0 }}
        atActive={{ opacity: 1 }}
        className="switch-wrapper"
      >
        <Route exact path="/" render={(props) => (<Home home={data.home} {...props}/>)}/>
        <Route path="/studies" render={(props) => (<Studies studies={data.studies} {...props}/>)}/>
        <Route path="/experiences" render={(props) => (<Experiences experiences={data.experiences} {...props}/>)}/>
        <Route path="/skills" render={(props) => (<Skills skills={data.skills} {...props}/>)}/>
        <Route path="/hobbies" render={(props) => (<Hobbies hobbies={data.hobbies} {...props}/>)}/>
      </AnimatedSwitch>
    </div>
  </Router>
)

it's also worth pointing out that the only valid children of a Switch are Route instances, so i went ahead and changed that for you as well.

let me know if you run into anything else. :v:

[ghost]

Ok thanks. I was thinking that < AnimatedSwitch > was in replacement of < Router >, because < Router > is missing in the example in the readme. (I'm new to React)

[maisano]

that's good feedback, i'll have to spell that out better in the readme. thanks!