React-Router：不适合我

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 link : https://github.com/piyushdhamecha/samplerouterui

Answer 1

这适用于 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="" 中给定的地址上。
在 React.js 项目的默认结构中，您应该有一个文件 main.js，上面的代码应该出现的地方。我在你的项目中找不到它，所以还有一件事要找出来：路由器放在哪里。

PS 在 React 中，组件文件的扩展名应该是 .jsx ;)

Answer 2

经过长时间的研究，代码可以正常工作。在 Route.

中将 components={LoginInputs} 替换为 render={(props) => (<LoginInputs/>)}

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

感谢贡献。

React-Router：不适合我

React-Router: Not working for me

javascript

reactjs

react-router

react-redux

react-router-redux