Question

我是新来的反应者，我正在尝试制作一个小程序。我有一个基于React的客户端，我的服务器正在Nodejs上运行，我的数据库是Postgres。

我设法通过服务器的auth从客户端进行有效登录。登录成功后如何显示新页面？

我的app.js：

export default class App extends React.Component {
  render() {
    const { url } = this.props.match

return (
  <div className="fx-row high">
      <Sidebar url={ url }/>
    <div className="page fx-col fx-grow" style = {{ width : 150, height : 150, marginLeft : 450, marginTop : 100}}>

      <Switch>
        <Route path={ url + 'demo' } component={ Demo }/>
        <Route path={ url + 'audits' } component={ Audits }/>
        <Route component={ Login }/>

      </Switch>
    </div>
  </div>
    )
  }
}

在我的登录名中，我有一个handleSubmit，它将带有参数的帖子发送到服务器并获取响应正文。我希望在handltSubmit得到正确的响应之后，显示与登录不同的屏幕，现在仅说“您已登录”的屏幕。

谢谢

Answer 1

使用BrowserRouter中的react-router-dom。

import {BrowserRouter, Switch, Route} from 'react-router-dom';

export default class App extends React.Component {
  render() {

return (
  <div className="fx-row high">
      <Sidebar url={ url }/>
    <div className="page fx-col fx-grow" style = {{ width : 150, height : 150, marginLeft : 450, marginTop : 100}}>

      <BrowserRouter>
       <Switch>
            <Route path='/demo' component={ Demo }/>
            <Route path='/audit' component={ Audits }/>
            <Route path='/SiteMange' component={ SiteManage }/>
            <Route path='/' component={ Login }/>
       </Switch>
    </BrowserRouter>
    </div>
  </div>
    )
  }
}

在Login组件中，可以调用push对象的history方法，该方法将在路由页面中以props的形式出现。

因此，登录成功后，请调用以下方法重定向到您的下一条路由。例如说home页。

this.props.history.push('SiteMange')

Answer 2

假设您正在使用提取请求服务器，则可以执行以下操作：

handleSubmit = () => {
    fetch(your code here)
    .then(res => res.json())
    .then(data => {
        if ( data.user ) {
            this.props.history.push("home"); // in this case I use home as your path name
        } else {
            Some actions here
        }
     });
};

希望有帮助。

Reactjs-登录后移至下一页

2 个答案: