React-Router：對我不起作用

Question

我是React-Router的新手，第一次使用React-Router創建一個項目。

但是對我來說不合適，我想我錯過了一些東西。

需求：

1）默認它應該加載logininput.js

2）for path='/Login'加載logininput.js

3）for 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

經過長時間的研究，這段代碼可行。 在Route中用render={(props) => (<LoginInputs/>)}替換components={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

謝謝你的貢獻。

Answer 2

這適用於React-Router v3.xx

你應該使用這樣的東西：

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;）