React-Router：不适合我答案

【问题标题】：React-Router: Not working for meReact-Router：不适合我
【发布时间】：2017-12-13 18:25:30
【问题描述】：

我是 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

【问题讨论】：

不工作是什么意思，你观察到的行为是什么
行为就像最初它应该加载logininput.js，现在没有加载，然后点击标题它应该加载相应的<input>.js .....错过了什么......？跨度>
@ShubhamKhatri 任何更新？？？
无法发现您的代码有任何问题。我会在一段时间内尝试调试。
@ShubhamKhatri 好的兄弟... np

标签： javascript reactjs react-router react-redux react-router-redux

【解决方案1】：

经过长时间的研究，代码有效。在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

感谢您的贡献。

【讨论】：

【解决方案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="" 中给出的地址上。
在 React.js 项目的默认结构中你应该有一个文件 main.js，其中上面代码应该出现。我在您的项目中找不到它，所以还有一件事要找出：路由器的放置位置。

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

【讨论】：

只是让您知道，此配置适用于 react-router v3.x.x 或更低版本，而不是 v4.x.x 以后的版本
我在我的 React 项目上工作了很长时间，似乎我不是最新的。很高兴知道，谢谢！ :)