React-Router: Not working for me

Question

i am newbies in React-Router, create one project using React-Router first time.

But not working properly for me, i think i have missed out something.

Requirement:

1) Default it should load logininput.js

2) for path='/Login' load logininput.js

3) for path='/Register' load registerinput.js

Source Code:

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

Full source github link : https://github.com/piyushdhamecha/samplerouterui

Answer 1

after long research here the code works. Replaced components={LoginInputs} with render={(props) => (<LoginInputs/>)} in 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

Thanks for contribution.

Answer 2

This works for React-Router v3.xx

You should probably use something like this:

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'));

where in component={} you write Your component that should be displayed on the address given in path="".
In default structure of React.js project You should have a file main.js, where the above code should appear. I can't find it in your project, so there's another thing to find out: where to put the Router.

PS In React, components files' extension should probably be .jsx ;)