I am in the process of migrating my React App from React-Router-3 to React-Router-4 and I am having a few issues. The layout of my application is as follows.
build
node_modules
public
src
AboutScreen
ContactScreen
HomeScreen
LoginScreen
SignUpScreen
WorkRequestScreen
App.js
index.js
routes.js
serviceWorker.js
package.json
package-lock.json
I am getting the following error:
./src/index.js: Line 8: Unexpected use of 'history' no-restricted-globals
When I remove the history={history}
from index.js
, I get the following error.
TypeError: Cannot read property 'location' of undefined
I have been following the following tutorial to migrate from 3 to 4.
https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a
My route.js
looks like this:
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;
My index.js
looks like this:
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();
Passing history explicitly isn't required as Route
is passed history
implicitly as prop. 1
I'd remove history
prop passed to Router
from the index.js
and also remove it from Router
in routes.js
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.