React-Router:不适合我
[英] React-Router: Not working for me
本文介绍了React-Router:不适合我的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 React-Router 的新手，第一次使用 React-Router 创建一个项目.
但对我来说不能正常工作，我想我错过了一些东西.
要求:
1) 默认它应该加载 logininput.js
2) 为 path='/Login' 加载 logininput.js
3) 为 path='/Register' 加载 registerinput.js
源代码:
Login.js
import React, { Component } from 'react'进口 {BrowserRouter 作为路由器，路线，关联，转变来自'反应路由器-dom'从./loginInputs"导入登录输入从./registerInputs"导入 RegisterInputsrequire('./Login.css')类登录扩展组件{构造函数(道具，上下文){超级(道具，上下文)}使成为() {返回 (<路由器><div><div className="容器" ><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 className="col-xs-6"><Link to="/Register">注册</Link>
<小时/>
<div className={'panel-body'}><div className="row"><div className="col-lg-12"><开关><Route path="/Login" components={LoginInputs}/><Route path="/Register" components={RegisterInputs}/><路由精确路径="/" components={LoginInputs}/></开关>
</路由器>)}}导出默认登录
loginInputs.js
import React, { Component } from 'react'类 LoginInputs 扩展组件 {构造函数(道具，上下文){超级(道具，上下文)调试器；}使成为(){调试器；返回(<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="用户名" value=""/><div className="form-group"><input type="password" name="password" id="password" tabindex="2" className="form-control" placeholder="密码"/>
<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="登录"/>
</表单>)}}导出默认登录输入
registerinputs.js
import React, { Component } from 'react'类 RegisterInputs 扩展组件 {构造函数(道具，上下文){超级(道具，上下文)}使成为(){返回(<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="用户名" value=""/><div className="form-group"><input type="text" name="userid" id="userid" tabindex="2" className="form-control" placeholder="userid" value=""/>
<div className="form-group"><input type="email" name="email" id="email" tabindex="1" className="form-control" placeholder="Email Address" value=""/>
<div className="form-group"><input type="password" name="password" id="password" tabindex="2" className="form-control" placeholder="密码"/>
<div className="form-group"><input type="password" name="confirm-password" id="confirm-password" tabindex="2" className="form-control" placeholder="Confirm Password"/>
<div className="form-group"><input type="text" name="age" id="age" tabindex="2" className="form-control" placeholder="age"/>
<div className="form-group"><input type="text" name="contactno" id="contactno" tabindex="2" className="form-control" placeholder="contactno"/>
<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"/>
</表单>)}}导出默认注册输入
完整源码github链接:https://github.com/piyushdhamecha/samplerouterui
解决方案
经过长时间的研究，这里的代码有效.将 components={LoginInputs} 替换为 render={(props) =>Route 中的 ()}.
import React, { Component } from 'react'进口 {BrowserRouter 作为路由器，路线，导航链接，转变来自'反应路由器-dom'从./loginInputs"导入登录输入从./registerInputs"导入 RegisterInputsrequire('./Login.css')类登录扩展组件{构造函数(道具，上下文){超级(道具，上下文)}使成为() {返回 (<路由器><div><div className="容器" ><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 准确的 activeClassName="active" to="/LoginPage/">登录</NavLink><div className="col-xs-6"><NavLink activeClassName="active" to="/LoginPage/Register">注册</NavLink>
<小时/>
<div className={'panel-body'}><div className="row"><div className="col-lg-12"><开关><路由精确路径="/LoginPage/" render={(props) =>(<登录输入/>)}/><Route path="/LoginPage/Register" render={(props) =>(<RegisterInputs/>)}/></开关>
</路由器>)}}导出默认登录
感谢您的贡献.
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
解决方案
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.
这篇关于React-Router:不适合我的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
