React - 迁移到 React Router 4

Question

我正在将我的 React 应用程序从 React-Router-3 迁移到 React-Router-4，我遇到了一些问题。我的应用布局如下。

build
node_modules
public
src
  AboutScreen
  ContactScreen
  HomeScreen
  LoginScreen
  SignUpScreen
  WorkRequestScreen
  App.js
  index.js
  routes.js
  serviceWorker.js
package.json
package-lock.json

我收到以下错误：

./src/index.js: Line 8: Unexpected use of 'history' no-restricted-globals

当我从 index.js 中删除 history={history} 时，出现以下错误。

TypeError: Cannot read property 'location' of undefined

我一直在按照以下教程从 3 迁移到 4。

https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a

我的 route.js 看起来像这样：

import React from 'react';
import { Route, Redirect, Router, Switch } from 'react-router-dom';
import createHashHistory from 'history/createHashHistory';
import App from './App';

import Home from './HomeScreen/Home';
import WorkReq from './WorkRequestScreen/WorkReq';
import About from './AboutScreen/About';
import Contact from './ContactScreen/Contact';
import Login from './LoginScreen/Login';
import Signup from './SignUpScreen/Signup';

const history = createHashHistory();
const routes = () => (
  <Router history={history}>
    <Switch>
      <Route exact path="/workReq" component={WorkReq}/>
      <Route exact path="/about" component={About}/>
      <Route exact path="/contact" component={Contact}/>
      <Route exact path="/login" component={Login}/>
      <Route exact path="/signup" component={Signup}/>
      <Route exact path="/" component={Home}/>
    </Switch>
  </Router>
);

export default routes;

我的 index.js 看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';

import { Route, Redirect, Router, Switch } from 'react-router-dom';
import routes from './routes'; 

ReactDOM.render(<Router history={history} routes={routes}/>, 
document.getElementById('root'));

serviceWorker.unregister();

Answer 1

不需要显式传递历史记录，因为 Route 作为 prop 隐式传递 history。 ¹

我将从 index.js 中删除传递给 Router 的 history 道具，并将其从 routes.js

中的 Router 中删除

React - 迁移到 React Router 4

React - Migrating to React Router 4

reactjs

react-router

react-router-v4