[英]Redirect in Reactjs with React-Router
我想在登录页面上单击一个按钮后重定向到主页。.但是,当我单击地址栏中的按钮时,会显示主页的路径(它将重定向到主页)。但是它不会呈现与该路径相关的组件。它仍然显示带有主页地址的登录页面。因此,我必须刷新页面以呈现主页。这里出了什么问题???
在我的登录页面中...这是我用于onClick按钮的功能。
gotopage()
{
this.props.history.push('/home')
}
在我的index.js页面中。
import React from "react";
import { render } from "react-dom";
import {BrowserRouter as Router,Route,Redirect ,browserHistory} from "react-router-dom";
import { Firstpage } from "./Firstpage";
import { Login } from "./Login";
import { Home } from "./Home";
import createBrowserHistory from 'history/createBrowserHistory'
const history=createBrowserHistory();
class App extends React.Component {
render(){
return(
<Router history={browserHistory}>
<div>
<switch>
<Route path="/" component={Firstpage} exact> </Route>
<Route path="/home" component={Home}> </Route>
<Route path="/login" render={(props) => <Login {...props} history=
{history} } />}> </Route>
</switch>
</div>
</Router>
);
}
}
我会建议一些事情。 由于您使用的是React Router 4.x,根据文档,BrowserRouter没有历史记录道具,因此请删除它。 将您的代码更新为以下代码,看看它是否有效。
将switch更改为Switch,我看不到它是从react-router导入的。 在您的Login组件中使用react-router中的withRouter。
export default withRouter(Login)
如下更新主路由配置。
<Router history={browserHistory}>
<Switch>
<Route path="/" component={Firstpage} exact> </Route>
<Route path="/home" component={Home}> </Route>
<Route path="/login" render={(props) => <Login {...props}/>}> </Route>
</Switch>
</Router>
在https://reacttraining.com/react-router/web/api/BrowserRouter上阅读有关withRouter和BrowserRouter的更多信息。
有关更多详细信息,请查看以下帖子:https://medium.com/@AkyunaAkish/understanding-react-router-4-df73a66d96c4
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.