Question

我是aggregate的新用户我有三个组件ReactJS，App.js，Login.js当wepapp启动它首先在该组件中启动Register.js我有两个按钮“登录”和“注册”，通过单击“登录”按钮，它应该转到App.js组件，然后单击“注册”按钮它应该转到LogIn组件，我找不到干净的方法实现这一点。这是我的Register

代码

App.js

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { constructor(props) { super(props); // This binding is necessary to make `this` work in the callback this.gotoLogin = this.gotoLogin.bind(this); this.gotoRegister = this.gotoRegister.bind(this); } gotoLogin() { alert("Login"); } gotoRegister() { alert("Register"); } render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <button onClick={this.gotoLogin} class="Button ">Login</button> <button onClick ={this.gotoRegister} class="Button">Register</button> </div> ); } } export default App;

的代码

index.js

我还有import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; ReactDOM.render( <App />, document.getElementById('root') );

的组件类

Answer 1

如果您使用router v2 or v3，请使用：

gotoLogin() {
   hashHistory.push("/Login");  or browserHistory.push("/Login");
}

gotoRegister() {
    hashHistory.push("/Register");  or browserHistory.push("/Register");
}

注意：使用与history相同的react-router。

如果您使用router v4，请使用：

gotoLogin() {
   this.context.router.transitionTo("/Login"); 
}

gotoRegister() {
    this.context.router.transitionTo("/Register"); 
}

注意：您需要与您的组件一起定义contextTypes。

检查此示例：

class App extends React.Component {
  constructor(props, context) {
    super();
    const { router } = this.context;
  }
  ....
}

App.contextTypes = {
  router: React.PropTypes.object
}

现在使用此：router.transitionTo("/Login");

请检查：https://github.com/ReactTraining/react-router/issues/4129

Answer 2

render() {
return (
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Welcome to React</h2>
    </div>
    <button href='#/login' onClick={this.gotoLogin} class="Button ">Login</button>
    <button href='#/register' onClick ={this.gotoRegister} class="Button">Register</button>
  </div>
);

}

Answer 3

你可以使用'react-router'中的链接组件导入，然后你应该写这样的东西：

public boolean validateLogin()
            {
                try {
                    progressBar.setVisibility(View.VISIBLE);
    //call webservice and get json response
                    String JSONStr = PostData();
                    jsonObject = new JSONObject(JSONStr);
                    String status = jsonObject.get("success").toString();
                    return status.equals("1");
                }
                catch (Exception e)
                {
                    return false;
                }
            }
             public String PostData() {
                    String jsonResponse = "";
                    String URL = "https://example.com/Login.php?Email=" + str_email + "&Password=" + str_password;
                    try {
                        HttpClient httpClient = new DefaultHttpClient();
                        HttpPost httpPost = new HttpPost(URL);

                        HttpResponse httpResponse = httpClient.execute(httpPost);

                        HttpEntity httpEntity = httpResponse.getEntity();
                        jsonResponse = readResponse(httpResponse);
                    } catch (Exception exception) {
                    }
                    return jsonResponse;
                }

                public String readResponse(HttpResponse res) {
                    InputStream is = null;
                    String return_text = "";
                    try {
                        is = res.getEntity().getContent();
                        BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(is));
                        String line = "";
                        StringBuffer sb = new StringBuffer();
                        while ((line = bufferedReader.readLine()) != null) {
                            sb.append(line);
                        }
                        return_text = sb.toString();
                    } catch (Exception e) {

                    }
                    return return_text;

                }

//组件内部组件：

import { Link, Router, RouterContext, browserHistory } from 'react-router';

所以按钮应该是这样的：

                        <Link to={'/login'}>clikc to login</Link>

如果有帮助请投票谢谢你，

Answer 4

您可以尝试以下代码

import { Link } from 'react-router';


<ul>
      <li><Link to="/login" onClick={this.gotoLogin}>Login</Link></li>
      <li><Link to="/register" onClick ={this.gotoRegister}>Register</Link></li>
 </ul>

Answer 5

感谢所有人的努力@Mayank @Johib @hod caspi and @sneha我找到了问题的根本原因。我使用的是react-router 4.0.0内部实施错误，它找不到location然后我不得不降级react-router to 3.0.3然后再次降低另一个错误而不是未定义的getCurrentlocation我必须通过<Router history={browserHistory}>这样的history。这是我的最终代码看起来像

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


import { Link, Router, RouterContext, browserHistory, hashHistory } from 'react-router';

class App extends Component {


  constructor(props) {
    super(props);
    // This binding is necessary to make `this` work in the callback
    this.gotoLogin = this.gotoLogin.bind(this);
    this.gotoRegister = this.gotoRegister.bind(this);
  }



  gotoLogin() {

    browserHistory.push("/login");
  }

  gotoRegister() {
    browserHistory.push("/register");

  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>

        <button onClick={this.gotoLogin} >Login</button>
        <button onClick={this.gotoRegister} >Register</button>
        <Link to={'/login'} >Login</Link>
        {this.props.children}

      </div>
    );
  }

}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Login from './Login';
import Register from './Register';

import './index.css';
import {Route, Router,browserHistory } from 'react-router';

ReactDOM.render( 
<Router history={browserHistory}> 

<Route path="/" component={App} /> 
<Route path="/login" component={Login} /> 
<Route path="/register" component={Register} /> 

</Router>, 
document.getElementById('root') 
)

想要将一个组件路由到另一个组件

5 个答案: