App.js
import { Route, Router, Switch } from 'react-router-dom'
import Login from './Pages/Login';
import Profile from './Pages/Profile';
import Routes from './Routes1/Route';
function App() {
return (
<div className="App">
<Routes />
</div>
);
}
export default App;
Route.js
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import Login from '../Pages/Login';
import Profile from '../Pages/Profile';
const Routes = () => {
const history = createBrowserHistory();
return (
<Router history={history}>
<Switch>
<Route path="/login" component={Login} />
<Route path="/profile" component={Profile} />
</Switch>
</Router>
);
}
export default Routes;
Login.js
import React from 'react'
import {useHistory} from 'react-router-dom'
function Login() {
const history=useHistory();
const handleHistory=() =>{
history.push("/profile")
}
return (
<div>
<input type="text" placeholder="username" />
<input typ="text" placeholder="password" />
<button onClick={handleHistory}> Submit </button>
</div>
)
}
export default Login
Profile.js
import React from 'react'
function Profile() {
return (
<div>
Congratulations! You have successfully logged in!
</div>
)
}
export default Profile
Package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.9.10",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.50",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^13.1.5",
"formik": "^2.1.4",
"loadjs": "^4.2.0",
"lodash": "^4.17.15",
"history": "^5.0.0",
"prop-types": "^15.7.2",
"pure-react-carousel": "^1.27.0",
"react": "^17.0.2",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^17.0.2",
"react-render-html": "^0.6.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"web-vitals": "^1.0.1",
"yup": "^0.28.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
错误错误:无效的钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一:
- 你可能有不匹配的版本的React和渲染器(如React DOM)
- 你可能违反了Hooks的规则
- 你可能在同一个应用程序中有多个React副本有关如何调试和修复此问题的提示,请参阅https://reactjs.org/link/invalid-hook-call。
我不确定import { createBrowserHistory } from 'history';
,但您的代码应该在没有它的情况下工作,并将BrowserRouter
作为路由器:
Route.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from '../Pages/Login';
import Profile from '../Pages/Profile';
const Routes = () => {
return (
<Router>
<Switch>
<Route path="/login" component={Login} />
<Route path="/profile" component={Profile} />
</Switch>
</Router>
);
}
我看不出你的代码有什么问题,然而,你不需要路由组件中的历史记录来达到这个目的,试着删除以下行:
const history = createBrowserHistory()
router中的和history道具。或者不创建handleSubmit
函数,尝试在onClick
处传递directly () => history.push()
。