反应路由器4失败的上下文类型

Question

我已经插入反应路由器4到我的反应创建应用程序和运行npm运行测试我得到以下错误：

 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)

我在用react-router@4.2.0，并对路由器作出反应-dom@4.2.2

我已确保我的

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;

还有我的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')
);

还有别人看到这个吗？




Answer 1

它是创建反应应用程序的默认测试示例。

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);
});

路由器上下文在index.js文件中提供，并且在运行测试时不存在。

你应该下一步重写：

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
  );
});

或者将“提供商”和“浏览器路由器”移动到“应用程序”组件中。