Question

我是React-Router的新手，第一次使用React-Router创建一个项目。

但是对我来说不合适，我想我错过了一些东西。

要求：

1）默认情况下应加载logininput.js

2）path='/Login'加载logininput.js

3）path='/Register'加载registerinput.js

源代码：

Login.js

import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch
} from 'react-router-dom'
import LoginInputs from "./loginInputs"
import RegisterInputs from "./registerInputs"

require('./Login.css')

class Login extends Component {

  constructor(props, context) {
    super(props, context)

  }

  render() {
    return (
      <Router>
        <div>
          <div className="container" >
            <div className="row">
              <div className="col-md-6 col-md-offset-3">
                <div className={'panel panel-login'}>
                  <div className={'panel-heading'}>
                                <div className="row">
                                    <div className="col-xs-6">
                        <Link className={'active'} to="/Login">Login</Link>
                                    </div>
                                    <div className="col-xs-6">
                        <Link to="/Register">Register</Link>
                                    </div>
                                </div>
                                <hr/>
                            </div>
                  <div className={'panel-body'}>
                                <div className="row">
                                    <div className="col-lg-12">
                        <Switch>
                                        <Route path="/Login" components={LoginInputs}/>
                          <Route path="/Register" components={RegisterInputs}/>
                          <Route exact path="/" components={LoginInputs}/>
                        </Switch>
                                    </div>
                                </div>
                            </div>
                </div>
              </div>
              </div>
          </div>
        </div>
      </Router>
    )
  }
}

export default Login

loginInputs.js

import React, { Component } from 'react'

class LoginInputs extends Component {

  constructor(props, context) {
    super(props, context)
    debugger;
  }
  render(){
    debugger;
    return(
      <form id="login-form" method="post" role="form" style={{"display": "block"}}>
        <div className="form-group">
          <input type="text" name="username" id="username" tabindex="1" className="form-control" placeholder="Username" value="" />
        </div>
        <div className="form-group">
          <input type="password" name="password" id="password" tabindex="2" className="form-control" placeholder="Password" />
        </div>

        <div className="form-group">
          <div className="row">
            <div className="col-sm-6 col-sm-offset-3">
              <input type="submit" name="login-submit" id="login-submit" tabindex="4" className="form-control btn btn-login" value="Log In" />
            </div>
          </div>
        </div>

      </form>
    )
  }
}

export default LoginInputs

registerinputs.js

import React, { Component } from 'react'

class RegisterInputs extends Component {

  constructor(props, context) {
    super(props, context)

  }
  render(){
    return(
      <form id="register-form" action="http://phpoll.com/register/process" method="post" role="form" style={{"display": "none"}}>
                <div className="form-group">
                    <input type="text" name="username" id="username" tabindex="1" className="form-control" placeholder="Username" value="" />
                </div>
                <div className="form-group">
                    <input type="text" name="userid" id="userid" tabindex="2" className="form-control" placeholder="userid" value="" />
                </div>
                <div className="form-group">
                    <input type="email" name="email" id="email" tabindex="1" className="form-control" placeholder="Email Address" value="" />
                </div>
                <div className="form-group">
                    <input type="password" name="password" id="password" tabindex="2" className="form-control" placeholder="Password" />
                </div>
                <div className="form-group">
                    <input type="password" name="confirm-password" id="confirm-password" tabindex="2" className="form-control" placeholder="Confirm Password" />
                </div>
                <div className="form-group">
                    <input type="text" name="age" id="age" tabindex="2" className="form-control" placeholder="age" />
                </div>
                <div className="form-group">
                    <input type="text" name="contactno" id="contactno" tabindex="2" className="form-control" placeholder="contactno" />
                </div>
                <div className="form-group">
                    <div className="row">
                        <div className="col-sm-6 col-sm-offset-3">
                            <input type="submit" name="register-submit" id="register-submit" tabindex="4" className="form-control btn btn-register" value="Register Now" />
                        </div>
                    </div>
                </div>
            </form>
    )
  }
}

export default RegisterInputs

完整源码github链接：https://github.com/piyushdhamecha/samplerouterui

Answer 1

经过长时间的研究，代码可以运行。在components={LoginInputs}中将render={(props) => (<LoginInputs/>)}替换为Route。

import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Switch
} from 'react-router-dom'
import LoginInputs from "./loginInputs"
import RegisterInputs from "./registerInputs"

require('./Login.css')

class Login extends Component {

  constructor(props, context) {
    super(props, context)

  }

  render() {
    return (
      <Router>
        <div>
          <div className="container" >
            <div className="row">
              <div className="col-md-6 col-md-offset-3">
                <div className={'panel panel-login'}>
                  <div className={'panel-heading'}>
                      <div className="row">
                          <div className="col-xs-6">
                              <NavLink exact activeClassName="active" to="/LoginPage/">Login</NavLink>
                          </div>
                          <div className="col-xs-6">
                              <NavLink activeClassName="active" to="/LoginPage/Register">Register</NavLink>
                          </div>
                      </div>
                      <hr/>
                  </div>
                  <div className={'panel-body'}>
                      <div className="row">
                          <div className="col-lg-12">
                              <Switch>
                                  <Route exact path="/LoginPage/" render={(props) => (<LoginInputs/>)}/>
                                  <Route path="/LoginPage/Register" render={(props) => (<RegisterInputs/>)}/>
                              </Switch>
                          </div>
                      </div>
                  </div>
                </div>
              </div>
              </div>
          </div>
        </div>
      </Router>
    )
  }
}

export default Login

感谢您的贡献。

Answer 2

适用于React-Router v3.x.x

你应该使用这样的东西：

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={LoginInputs}>
            <Route path="/login" component={LoginInputs}>
            </Route>
            <Route path="/register" component={RegisterInputs}>
            </Route>
        </Route>
    </Router>
    , document.getElementById('app'));

在component = {}中你编写的组件应该显示在path =＆＃34;＆＃34;中给出的地址上。
在React.js项目的默认结构中你应该有一个文件main.js，应该出现上面的代码。我无法在您的项目中找到它，因此还有另一件事要找出：放置路由器的位置。

PS在React中，组件文件＆＃39;扩展应该是.jsx;）

React-Router：对我不起作用

2 个答案: