Question

我已经在登录页面上工作，这是用于控制的页面越权存取。但是，页面重定向在这里不起作用

Here is my code   

import React from 'react';
import { Layout, Menu, Breadcrumb, Button } from 'antd';
import { BrowserRouter, Link, Redirect } from 'react-router-dom';

const { Header, Content, Footer } = Layout;
class MainPage extends React.Component {
  constructor(props) {
  super(props);     
  }  
state= {
      redirect: false,
  }

 render()
{
 let users=localStorage.getItem('user');
 function logOut() {
 if (true) {
 localStorage.clear();
 this.props.history.push('/Signin');
    }
    }
function AuthPage () {
return(
     <div>      
   { 
       (users) ? (<Layout>

   <Content>
              <div className="main-content">
                    <Link to="/Profile">Profile {users}</Link> | 
                    <Link to="/Topics">Topics</Link> | 
                   <Button onClick={logOut} type="link" >Logout</Button>
              </div> 
          </Content>
        </Layout> 
        ) : (<div>Need to login</div>
            )
   }
   </div>
 );
 }
   return(AuthPage());
  }
 }

 export default MainPage;

我也尝试过：

这在重定向中也不起作用。

 import React from 'react'
 import  { Redirect } from 'react-router-dom'

  const ProtectedComponent = () => {
     if (authFails)
     return <Redirect to='/Signin'  />
     }
     return <div> My Protected Component </div>
   }

在React.js中实现重定向的正确方法是什么。

Answer 1

您可以在React.js中使用 Redirect 和 history 进行重定向。但是两者的实现方式略有不同。

重定向非常明确，历史记录是隐式的，行数更少。

请查看此链接（programmatically redirect in react.js），以了解更多有关带有示例的react.js重定向的信息。

Answer 2

您导入了BrowserRouter，但未使用它。因为导入位置不正确，所以需要在index.js中使用它。

组件BrowserRouter将历史对象包装在浏览器中，并将其向下传递到组件树。在组件树中的任何位置，您都可以使用历史对象。

Index.js

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

如果在函数内部使用“ this”，则它将指向浏览器中“ window”的全局对象。

function logOut() {
 if (true) {
 localStorage.clear();
 this.props.history.push('/Signin');
    }
    }

在此代码段中， this.props.history.push = windows.props.history.push 由于在全局环境中没有定义“ props”对象，因此它将返回未定义的对象。

解决方案使用箭头功能。箭头功能使用包含功能的“ this”值。

logout=()=>{if (true) {
 localStorage.clear();
 this.props.history.push('/Signin');
    }}

您甚至不需要使用

If(true)

您还必须创建一个登录页面以注册路线。我们通常在app.js中注册路线

 import { Route } from "react-router-dom";

                <Route path="/not-found" component={NotFound} />
                <Route path="/signin" exact component={signin} />
                <Redirect to="/not-found" />

这里我还注册了一个未找到的路由器，这是处理404页的基本实现。您需要创建找不到的组件。

如何使用history.push（）函数重定向页面

2 个答案: