反应Auth状态和Routes。无法在React-Router的'History'上执行'replaceState'

Question

使用软件包

  "react-router": "^4.3.1",
   "react-router-dom": "^4.3.1",

App.js

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      authState: null,
    };
  }

  mutateAuthState = () => {
    this.setState({
       authState: true,
      });
  }
  render() {
    return (<Routes authState={this.state.authState}  mutateAuthState={this.mutateAuthState} />)
    }
}

Routes.js

class Routes extends React.Component {
    render() {
      return (
        <React.Fragment>

            <BrowserRouter >
              <Switch>
                  <Route path="/login" exact render={  () => <Login authState={this.props.authState} 
                                                                    mutateAuthState={this.props.mutateAuthState}/>
                                                     } /> 
                  <Route path="/" exact render={  () => <div><a href="/login" >login</a></div> } />
            </Switch>
      </BrowserRouter>
  </React.Fragment>
      );
    }
  }

Login.js

class Login extends Component {


  handleSubmit = async (event) => {

     this.props.mutateAuthState(true)

 }

  render() {

    switch(this.props.authState) {
      case true : return (<Redirect to="\" />)

       default :    return(
      <button onClick={this.handleSubmit}  >Login </button>

    )
  }
}
}

想要最终结果-单击Login.js中的“登录”按钮会将App.js中的状态变量authState设置为true。

由于状态已更改，应用将重新呈现Routes.js。

在内部路由中，由于url仍为/ login，因此呈现了Login组件。

内部登录中，由于this.props.authState现在设置为true，因此发生了到“ /”的重定向。

但是我在Web控制台中得到了DOMException

  

错误：DOMException：无法在“历史记录”上执行“ replaceState”：A   不能在文档中创建带有URL'http：'的历史状态对象   源“ http://localhost:3000”和URL   'http://localhost:3000/login'。

这是React中身份验证的适当架构吗？

Answer 1

我可以看到两件事。

您不应该重定向到正斜杠而不是反斜杠吗？

将<Redirect to="\" />更改为<Redirect to="/" />

第二件事是您可能需要升级您的react-router版本。问题是您的重定向正试图回到家中，但是在重定向到/路由时是there is a bug。

版本4.6.1应该为您正确重定向。