Реагировать на перенаправление при нажатии кнопки - PullRequest
Новая
       16

Реагировать на перенаправление при нажатии кнопки

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

Я учусь реагировать и практикую создание простого приложения для входа и просмотра отправленных сообщений.Я много читал о маршрутизации, ссылках и перенаправлении, но я не смог перевести на свое приложение.Я хотел бы нажать на кнопку «Войти» компонента и перенаправить на другой компонент.

Здесь у меня есть основной компонент: App.js 

    import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

class Login extends Component {
  state = {
    loggedIn:false
  };


  loginHandle = () => {
    this.setState({loggedIn:true});
  }

  render(){
    return (
            <div className="container d-flex h-100">
                <div className="row align-self-center w-100">
                  <div className="col-6 mx-auto"> 
                    <div className="jumbotron">
                    <form name="form1">
                      <fieldset>
                        <legend>Chat App</legend>
                          <label for="UserName" className="col-form-label">Username</label>
                          <input type="text" className="form-control col-12" id="UserName"></input>
                          <label for="Password" className="col-form-label">Password</label>
                          <input type="text" className="form-control col-12" id="Password"></input>
                          <button type="button" value="log in" className="btn btn-secondary" onClick={this.loginHandle}>Login</button>
                      </fieldset>
                    </form>
                    <div style={{float:"right"}}>
                      <div className="login-help ">
                        <a href="#" className="badge badge-light">Register</a> - <a href="#" className="badge badge-light">Forgot Password</a>
                     </div>  
                   </div>
                    </div>
                  </div>
                </div>
               </div>
    );
  }
}
  
  
export default Login;

Я обернул все ссылки в компоненте «Навигация». Поэтому, когда я направляю /, он переходит к компоненту «Вход» 

	 class Login extends Component {
			state = {
					loggedIn:false
			};


		loginHandle = () => {
			this.setState({loggedIn:true});
		}

		render(){
			return (
				<div className="container d-flex h-100">
					<div className="row align-self-center w-100">
					  <div className="col-6 mx-auto"> 
						<div className="jumbotron">
						<form name="form1">
						  <fieldset>
							<legend>Chat App</legend>
							  <label for="UserName" className="col-form-label">Username</label>
							  <input type="text" className="form-control col-12" id="UserName"></input>
							  <label for="Password" className="col-form-label">Password</label>
							  <input type="text" className="form-control col-12" id="Password"></input>
							  <button type="button" value="log in" className="btn btn-secondary" onClick={this.loginHandle}>Login</button>
                      </fieldset>
                    </form>
                    <div style={{float:"right"}}>
                      <div className="login-help ">
                        <a href="#" className="badge badge-light">Register</a> - <a href="#" className="badge badge-light">Forgot Password</a>
                     </div>  
                   </div>
                    </div>
                  </div>
                </div>
               </div>
    );
  }
}
 
export default Login;

Нужно ли мне импортировать маршруты и перенаправлять в компоненте «Вход», или мне нужно управлять всем из компонента «Приложение»?Извините за этот беспорядок, но я не знаю, как продолжить

Большое спасибо.Я действительно заранее оценил.

Ответы [ 2 ]

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

Правильный способ для того, что вы хотите, я думаю, что это так. Так что следуй за мной ..

Вам нужно использовать роутер. В моем случае я использую React-Router-DOM.

Первый компонент приложения маршрутизатора, по умолчанию на странице отображаются компоненты DefaultPage, а в DefaultPage при подключении компонента клиент может отображаться в любом месте.

index.js выглядит так: 

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


class DefaultPage extends Component {
    state = {
        autorized: false,
        mounted: false,
    }

    componentDidMount = () => {
        const { autorized } = this.state;
        if (!autorized) {
            this.props.history.push('/login');
            return;
        }

        this.setState({
            mounted: true,
        });
    }

    render = () => {
        if (!this.state.mounted) {
            return (
              <React.Fragment>
                  <p>Waiting...</p>
              </React.Fragment>
            )
        }

        return (
          <React.Fragment>
              <p>Hello...</p>
          </React.Fragment>
        )
      }
}

class Login extends React.Component {
    handleLogin = () => {
        if (contidion) {
            this.props.history.push('/');
        }
    }

    render = () {
      return (
        <button onClick={this.handleLogin}>Click to login</button>
      )
    }
}

class App extends React.Component {
    render = () {
      return (
        <Switch>
          <Route exact path="/" component={DefaultPage} />
          <Route path="/login" component={Login} />
          <Route component={DefaultPage} />
        </Switch>
      )
    }
}


ReactDOM.render(
    <BrowserRouter >
      <App />
    </BrowserRouter>,
  document.getElementById("root")
);
0 голосов
/ 18 ноября 2018

Самый простой способ навигации по другому маршруту.

Например, вы можете обернуть Forgot password следующим образом:

<Link to="/forgotRoute">Forgot password?</Link>

Не забудьте добавить обработку /forgotRoute в конфигурацию Navigator (куда вы перенаправили / в компонент Login).

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

...