javascript - React Router 4 失败的上下文类型

Question

我已将React Router 4插入我的react-create-app并运行npm run test我收到以下错误:

 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和react-router-dom@4.2.2

我已确保我的<Switch>组件嵌套在 <BrowserRouter> 内.

应用程序.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

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

路由器上下文在“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
  );
});

或将“Provider”和“BrowserRouter”移动到“App”组件中。