Я не могу реализовать Redirect в React - PullRequest
Новая
       19

Я не могу реализовать Redirect в React

0 голосов
/ 17 апреля 2019

Я хочу перенаправить на домашнюю страницу, когда какое-либо условие возвращает null или false, но действие Redirect не запускается. 

import { Link, Redirect } from "react-router-dom";

if(localStorage.getItem("example") === null || localStorage.getItem("example") === false){
    return <Redirect to="/" />
}

Я поместил этот код внутри в простую функцию, запускаемую в один OnClick и componentDidMount(), но это не работает.

Ответы [ 3 ]

1 голос
/ 17 апреля 2019

Вам нужно использовать Redirect внутри рендера. Это React Component, который визуализирует, а затем отправляет пользователя по нужному пути: 

import React, { Component } from "react";
import { Route, Switch, Redirect } from "react-router-dom";

class RootPage extends React.Component {
  state = {
    isLoggedOut: false
  };

  onClick = () => {
    this.setState({
      isLoggedOut: true
    });
  };

  render() {
    return (
      <div>
        {this.state.isLoggedOut && <Redirect to="/logout" />}
        <button onClick={this.onClick}>Logout</button>
      </div>
    );
  }
}

const Log = () => <h1>Logout</h1>;

class App extends Component {
  render() {
    return (
      <div>
        <nav className="navbar navbar" />
        <Switch>
          <Route exact path="/" component={RootPage} />
          <Route exact path="/logout" component={Log} />
        </Switch>
      </div>
    );
  }
}
export default App;

Когда вы нажимаете кнопку выхода из системы, вы будете перенаправлены на rootPath.

Вот демоверсия: https://codesandbox.io/s/q9v2nrjnx4

1 голос
/ 17 апреля 2019

Вы можете использовать Перенаправление на домашнюю страницу, основываясь на флаге перенаправления, который можно изменить с помощью setState в onClickHandler или handleSubmit. 

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

class MyComponent extends React.Component {
  state = {
    redirect: false
  }

  handleSubmit () {
    if(localStorage.getItem("example") === null || localStorage.getItem("example") === false){
      return this.setState({ redirect: true });
    }
  }

  render () {
    const { redirect } = this.state;

    if (redirect) {
      return <Redirect to='/'/>;
    }
    return <YourForm/>;
}
0 голосов
/ 17 апреля 2019

Посмотрите этот пример в официальных документах.

<Redirect /> должен быть внутри вашего render метода, если вы используете компонент класса. или если вы используете функциональный компонент, он должен быть в том, что он возвращает.

Пример ниже: 

import { Component } from 'react';

const PrivateComponent = (props) => {
  return(
    localStorage.getItem("example")
      ? <RandomComponent />
      : <Redirect to="/signin" />
  )
}
...