Reactjs - перейти на следующую страницу после входа в систему - PullRequest
Новая
       20

Reactjs - перейти на следующую страницу после входа в систему

0 голосов
/ 18 октября 2018

Я новичок, чтобы реагировать, и я пытаюсь сделать небольшую программу.У меня есть клиент, основанный на реакции, мой сервер работает на Nodejs, а моя база данных - Postgres.

Мне удалось создать рабочий логин от клиента с аутентификацией с сервера.Как я могу показать новую страницу после успешного входа?

my 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 получил правильный ответ, чтобы показать другой экран от входа в систему, скажем, просто экран, который покажет «Вы вошли в систему».

Спасибо

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Предполагая, что вы используете fetch для запроса к серверу, вы можете сделать следующее: 

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

Надеюсь, это поможет.

0 голосов
/ 18 октября 2018

Используйте 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')

...