React Auth state 和 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 ，因此呈现登录组件。

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

但是我在 Web 控制台中收到 DOMException

Error: DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL 'http:' cannot be created in a document with origin 'http://localhost:3000' and URL 'http://localhost:3000/login'.

这是 React 中身份验证的正确架构吗？

Answer 1

我能看到两件事。

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

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

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

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

React Auth state 和 Routes 。无法在 React-Router 中的 'History' 上执行 'replaceState'

React Auth state and Routes . Failed to execute 'replaceState' on 'History' inside React-Router

reactjs

react-router-dom