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>.

中

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

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' 组件中。

React Router 4 失败的上下文类型

React Router 4 Failed context type

javascript

reactjs

react-router

react-router-v4