时间戳

首页 > 解决方案 > 使用 React-Router 在 Reactjs 中重定向

reactjs - 使用 React-Router 在 Reactjs 中重定向

问题描述

单击登录页面中的按钮后，我想重定向到主页..但是当我单击地址栏中的按钮时，会显示主页的路径（它重定向到主页）..但它不会呈现与该路径相关的组件。它仍然显示带有主页地址的登录页面。所以，我必须刷新页面才能呈现主页。这里有什么问题？？？

在我的登录页面中......这是我用于按钮 onClick 的功能......

gotopage()
  {
        this.props.history.push('/home')
   }

在我的索引，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>
     );
   }
 }

标签： reactjsreact-router

解决方案

我有几点建议。由于您使用的是 React 路由器 4.x BrowserRouter 没有历史记录，根据文档删除它。将您的代码更新为以下内容，看看它是否有效。

将 switch 更改为 Switch，我看不到它是从 react-router 导入的。在登录组件中使用来自 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>

在此处阅读有关 withRouter、BrowserRouter 的更多信息https://reacttraining.com/react-router/web/api/BrowserRouter。

有关更多详细信息，请查看以下帖子 https://medium.com/@AkyunaAkish/understanding-react-router-4-df73a66d96c4

推荐阅读