React Router v5:history.push() 改变地址栏但不改变页面 [英] React Router v5: history.push() changes the address bar but does not change the page
问题描述
如果我的 React 应用程序登录成功,我会尝试将用户重定向到新页面.重定向是从身份验证服务调用的,该服务不是组件.为了访问组件外的历史对象,我在 React 路由器常见问题.但是,当我调用 history.push('/pageafterlogin')
时,页面没有改变,我仍然停留在登录页面上(基于我的 Switch
我希望结束404
页面).地址栏中的 URL 确实更改为 /pageafterlogin
,但该页面未从登录页面更改.控制台中没有出现错误或任何其他表明我的代码不起作用的错误.
如何让 history.push()
也改变用户所在的页面?
///src/history.js从历史"导入 { createBrowserHistory };导出默认 createBrowserHistory();///src/App.js...import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';从 './history' 导入历史记录;功能应用(){返回 (<路由器历史={历史}><开关><路由路径="/";精确组件={HomePage}/><路由路径="/login";精确渲染={() =><FormWrapper><LoginForm/></FormWrapper>}/><路由渲染={()=><h1>404:未找到</h1>}/></开关></路由器>);}导出默认应用程序;//src/services/auth.service.js从 'axios' 导入 axios;从'../history'导入历史;const API_URL = '...';类 AuthService {登录(用户名,密码){返回 axios.post(API_URL + '登录', {用户名,密码}).then(res => {如果(res.status === 200){localStorage.setItem('user', JSON.stringify(res.data));history.push('/pageafterlogin');}});}}
不要使用 BrowserRouter
,而是使用 react-router-dom
中的 Router
>
您可以在此处查看示例
<预><代码>进口{路由器,路由,交换机,useHistory,创建}从'react-router-dom';从历史"导入 { createBrowserHistory };从反应"导入反应;const 历史 = createBrowserHistory();导出默认函数 App() {返回 (<路由器历史={历史}><开关><路由路径="/";精确分量={() =><h1>主页</h1>}/><路由路径="/login";精确组件={登录}/><路由渲染={()=><h1>404:未找到</h1>}/></开关></路由器>);}函数登录(){React.useEffect(() => {history.push('/pageafterlogin')}, [])返回<h1>登录页面</h1>}I am trying to redirect a user to a new page if a login is successful in my React app. The redirect is called from the auth service which is not a component. To access the history object outside of my component I followed this example in the React Router FAQ. However, when I call history.push('/pageafterlogin')
the page is not changed and I remain on the login page (based on my Switch
I would expect to end up on the 404
page). The URL in the address bar does get changed to /pageafterlogin
but the page is not changed from the login page. No errors appear in the console or anything else to indicate my code does not work.
How can I make history.push()
also change the page the user is on?
// /src/history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
// /src/App.js
...
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import history from './history';
function App() {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/login" exact render={() => <FormWrapper><LoginForm /></FormWrapper>} />
<Route render={() => <h1>404: not found</h1>} />
</Switch>
</Router>
);
}
export default App;
// src/services/auth.service.js
import axios from 'axios';
import history from '../history';
const API_URL = '...';
class AuthService {
login(username, password) {
return axios.post(API_URL + 'login', {
username,
password
}).then(res => {
if (res.status === 200) {
localStorage.setItem('user', JSON.stringify(res.data));
history.push('/pageafterlogin');
}
});
}
}
Instead of using BrowserRouter
, use Router
from react-router-dom
You could see the example here
import { Router, Route, Switch, useHistory, create } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import React from 'react';
const history = createBrowserHistory();
export default function App() {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={() => <h1>HomePage</h1>} />
<Route path="/login" exact component={Login} />
<Route render={() => <h1>404: not found</h1>} />
</Switch>
</Router>
);
}
function Login() {
React.useEffect(() => {
history.push('/pageafterlogin')
}, [])
return <h1>Login page</h1>
}
这篇关于React Router v5:history.push() 改变地址栏但不改变页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!