React Router 4 Échec de type de contexte

Question

J'ai branché réagir routeur 4 dans ma réaction-create-application et sur l'exécution npm run test je reçois l'erreur suivante:

Warning: Failed context type: The context `router` is marked as required in `Switch`, but its value is `undefined`. 
     in Switch (at App.js:17) 
     in main (at App.js:16) 
     in div (at App.js:15) 
     in App (at App.test.js:7) 

J'utilise react-router@4.2.0, et reac-router-dom@4.2.2

Je me suis assuré que mon composant <Switch> est imbriqué dans <BrowserRouter>.

app.js:

import React, { Component } from 'react'; 
import { Switch, Route, withRouter, Router } from 'react-router-dom'; 
import './App.css'; 

// Components 
import Header from '../../components/header/Header'; 
import Nav from '../../components/nav/Nav'; 
import Dashboard from './../../containers/dashboard/Dashboard'; 
import Events from './../../containers/events/Events'; 
import NotFound from './../../containers/notfound/NotFound'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <Header /> 
     <Nav /> 
      <main id="main"> 
       <Switch context="router"> 
        <Route path="/" exact component={Dashboard} /> 
        <Route path="/events" exact component={Events} /> 
        <Route path="*" component={NotFound} /> 
       </Switch> 
      </main> 
      </div> 
    ); 
    } 
} 

export default App; 

et mes index.js

import ReactDOM from 'react-dom'; 
import React from 'react'; 
import { BrowserRouter } from 'react-router-dom'; 
import { Provider } from 'react-redux'; 
import Store from './store'; 
import App from './containers/app/App'; 

import './index.css'; 

const StoreInstance = Store(); 

ReactDOM.render(
<Provider store={StoreInstance}> 
    <BrowserRouter> 
    <App /> 
    </BrowserRouter> 
</Provider>, 
document.getElementById('root') 
); 

Quelqu'un d'autre viennent à travers cela?

Answer 1

Il s'agit d'un exemple de test par défaut de Create React App.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 

it('renders without crashing',() => { 
    const div = document.createElement('div'); 
    ReactDOM.render(<App />, div); 
}); 

contexte routeur est fourni dans le fichier « index.js » et n'existe pas lorsque vous exécutez le test.

Vous devez réécrire la prochaine façon:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {BrowserRouter} from 'react-router-dom'; 
import App from './App'; 


it('renders without crashing',() => { 
    const div = document.createElement('div'); 

    const StoreInstance = Store(); 

    ReactDOM.render(
    <Provider store={StoreInstance}> 
     <BrowserRouter> 
      <App /> 
     </BrowserRouter> 
    </Provider>, 
    div 
); 
}); 

ou déplacement de 'fournisseur' et « BrowserRouter dans 'composant' App.