Как перенаправить страницу с помощью функции history.push ()

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>
   }

Что является правильнымспособ реализации Redirect в React.js.

Answer 1

Вы импортировали BrowserRouter, но не использовали его.Поскольку вы импортировали не в то место. Вам нужно использовать его в index.js.

Component BrowserRouter оборачивает объект истории в браузере и передает его в дерево компонентов.В любом месте дерева компонентов вы сможете использовать объект истории.

Index.js

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

Если вы используете «this» внутри функции, это будет указывать на глобальный объект, который является «окном» в браузере.

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

В этом фрагменте this.props.history.push = windows.props.history.push Поскольку в глобальной среде вы не определили объект «props», он вернет undefined.

Решение использует функцию стрелки.Функция стрелки использует значение 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 страниц.Вам необходимо создать не найденный компонент.