React-Router: funktioniert nicht für mich

Ich bin Anfänger in React-Router, erstellen Sie ein Projekt mit React-Router zum ersten Mal.React-Router: funktioniert nicht für mich

Aber funktioniert nicht richtig für mich, ich denke, ich habe etwas verpasst.

Voraussetzung:

1) Standard es logininput.js

2) für path='/Login' Last logininput.js

3) laden soll für path='/Register' Last 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

Voll Quelle Github Link: https://github.com/piyushdhamecha/samplerouterui

Quelle

2017-07-10 Piyush Dhamecha

was meinst du mit nicht funktioniert, was ist das Verhalten, das Sie beobachten –

Verhalten wie zunächst sollte es laden logininput.js, die gerade nicht geladen wird, und anschließend auf Klick der Kopfzeile sollte es laden ' .js '..... etwas verpasst ..? –

@ShubhamKhatri jedes Update ??? –

nach langer Forschung hier der Code funktioniert. Ersetzte components={LoginInputs} durch 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

Danke für den Beitrag.

Quelle

2017-07-11 10:33:03

Dies funktioniert für React-Router V3.xx

Sie wahrscheinlich so etwas wie diese verwenden sollte:

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

wo in der Komponente = {} Sie Ihre Komponente schreiben, die angezeigt werden sollen auf die Adresse in Pfad = "".
In der Standardstruktur von React.js Projekt Sie sollten eine Datei main.js haben, in der der obige Code erscheinen sollte. Ich kann es in Ihrem Projekt nicht finden. Es gibt also noch eine andere Sache: Wo finde ich den Router?

PS In Reaktion, Erweiterung Komponenten Dateien wahrscheinlich .jsx sein sollte;)

Quelle

2017-07-10 07:00:43 Destshar

Nur um Sie wissen zu lassen, dass diese Konfiguration auf react-router v3.xx oder weniger funktioniert und nicht ab v4.xx –

Ich arbeite lange an meinem React-Projekt, scheint, ich bin nicht auf dem neuesten Stand. Gut zu wissen, danke! :) – Destshar

React-Router: funktioniert nicht für mich

Antwort

Verwandte Themen