Question

我正在学习反应，并练习制作一个简单的应用程序来登录和查看所发送的消息。我已经阅读了很多有关路由，链接和重定向的信息，但是我无法翻译成我的应用程序。我想单击一个组件的“登录”按钮，然后重定向到另一个组件。

我这里的主要组件是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;

我是否必须导入路由并在Login组件中重定向，还是必须从App组件进行管理？抱歉这个烂摊子，但我不知道如何继续

非常感谢。我真的很提前。

Answer 1

导航到另一条路线的最简单方法。

例如，您可以如下包裹Forgot password：

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

不要忘记在导航器配置中添加/forgotRoute处理（将/路由到Login组件）。

希望有帮助。

Answer 2

我想的是您想要的正确方法。所以跟我来。

您需要使用路由器。就我而言，我正在使用react-router-dom。

第一个路由器App组件，默认情况下，其页面将呈现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")
);

单击按钮时反应重定向

2 个答案: