Reactjs 我能'；不能在React中实现重定向

当某些条件返回null或false，但未触发重定向操作时，我希望重定向到主页

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

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

从“react router dom”导入{Link，Redirect}；
if（localStorage.getItem（“示例”）==null | | localStorage.getItem（“示例”）==false）{
返回
}

---

我将此代码放在一个简单的函数中，该函数在一个

OnClick

和

componentDidMount（）

中触发，但它不起作用。

您可以根据重定向标志使用重定向到主页，该标志可以通过使用onClickHandler或handleSubmit中的setState更改

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

从“react router dom”导入{Redirect}；
类MyComponent扩展了React.Component{
状态={
重定向：false
}
handleSubmit（）{
if（localStorage.getItem（“示例”）==null | | localStorage.getItem（“示例”）==false）{
返回此.setState（{redirect:true}）；
}
}
渲染（）{
const{redirect}=this.state；
如果（重定向）{
返回；
}
返回；
}

您可以根据重定向标志使用重定向到主页，该标志可以通过使用onClickHandler或handleSubmit中的setState进行更改

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

从“react router dom”导入{Redirect}；
类MyComponent扩展了React.Component{
状态={
重定向：false
}
handleSubmit（）{
if（localStorage.getItem（“示例”）==null | | localStorage.getItem（“示例”）==false）{
返回此.setState（{redirect:true}）；
}
}
渲染（）{
const{redirect}=this.state；
如果（重定向）{
返回；
}
返回；
}

您需要在渲染内部使用重定向。它是一个React组件，用于渲染，然后将用户发送到所需的路径：

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;

import React，{Component}来自“React”；
从“react router dom”导入{Route，Switch，Redirect}；
类RootPage扩展了React.Component{
状态={
伊斯洛格杜特：错
};
onClick=（）=>{
这是我的国家({
伊斯洛格杜特：是的
});
};
render（）{
返回(
{this.state.isLoggedOut&&}
注销
);
}
}
const Log=（）=>注销；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

当您单击注销按钮时，它会将您重定向到根路径

---

演示如下：

您需要在渲染内部使用重定向。它是一个React组件，用于渲染，然后将用户发送到所需路径：

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;

import React，{Component}来自“React”；
从“react router dom”导入{Route，Switch，Redirect}；
类RootPage扩展了React.Component{
状态={
伊斯洛格杜特：错
};
onClick=（）=>{
这是我的国家({
伊斯洛格杜特：是的
});
};
render（）{
返回(
{this.state.isLoggedOut&&}
注销
);
}
}
const Log=（）=>注销；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

当您单击注销按钮时，它会将您重定向到根路径

这是演示：

看看官方文档

如果使用类组件，则

应该位于

呈现

方法中。如果使用函数组件，则它应该位于它返回的内容中

示例如下：

import { Component } from 'react';

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

从'react'导入{Component}；
const PrivateComponent=（道具）=>{
返回(
localStorage.getItem（“示例”）
? 
: 
)
}

看看官方文件中的内容

如果使用类组件，则

应该位于

呈现

方法中。如果使用函数组件，则它应该位于它返回的内容中

示例如下：

import { Component } from 'react';

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

从'react'导入{Component}；
const PrivateComponent=（道具）=>{
返回(
localStorage.getItem（“示例”）
? 
: 
)
}