![在同一页面上反应路由器渲染组件]( "在同一页面上反应路由器渲染组件")
本文介绍了在同一页面上反应路由器渲染组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的项目中使用 react router，当我点击登录按钮时，它 renders App 组件的内容，但显示它们在同一页面.当我点击 login 时，我想在 new page 上显示，帮帮我
import React, { Component } from 'react';从 '../services/service' 导入 * 作为服务；导入'../App.css'导入'../index.css'从'../App'导入应用程序import { Link, Redirect, Router, Route, browserHistory,IndexRoute } from 'react-router';//从 'history/createBrowserHistory' 导入 createHistory类登录扩展组件{构造函数(道具){超级(道具)；this.state = {消息:[]}}提交(){browserHistory.push('/world');}使成为() {const {消息} = this.state;返回 (<div className="应用程序"><h2>医生登录页面</h2></标题><表格><路由器历史={browserHistory}><Route path="/world" component={App}/></路由器><br/><br/><br/>用户名:<input name='email' placeholder='Email'/><br/><br/>密码:<input name='password' placeholder='Password' type='password'/><br/><br/><button onClick={() =>this.onSubmit()}>登录</button></表单>
);}}导出默认登录；
解决方案
您似乎想通过两种方式解决此问题
1) 使用 react-router 库中的精确路径"属性
2) 删除路由下面的代码并将其放入组件本身并声明自己的路由，因为上面的代码运行主路由器并在路由器下面留下静态 JSX.
<路由精确路径="/world" component={App}/>
im using react router on my project, when i hit the login button, it renders the content of App component, but displays them on the same page. i want to display on new page when i hit login, help me
import React, { Component } from 'react';
import * as service from '../services/service';
import '../App.css'
import '../index.css'
import App from'../App'
import { Link, Redirect, Router, Route, browserHistory,IndexRoute } from 'react-router';
// import createHistory from 'history/createBrowserHistory'
class Login extends Component {
constructor(props) {
super(props);
this.state = {
messages: []
}
}
onSubmit() {
browserHistory.push('/world');
}
render() {
const { messages } = this.state;
return (
<div className="App">
<header>
<h2> Doctor Login Page </h2>
</header>
<form>
<Router history={browserHistory}>
<Route path="/world" component={App}/>
</Router>
<br /><br /><br />
Username: <input name='email' placeholder='Email' /><br /><br />
Password: <input name='password' placeholder='Password' type='password' />
<br /><br />
<button onClick={() => this.onSubmit()}>Login</button>
</form>
</div>
);
}
}
export default Login;
解决方案
It looks like you want to tackle this in either two ways
1) Use the 'exact path' property from the react-router library
<Route exact path="/world" component={App}/>
2) remove the code below the route and put that into a component itself and declare its own route as your code above has the main router running as well as leaving static JSX below the routers.
<Route exact path="/" component={Login}/>
<Route exact path="/world" component={App}/>
这篇关于在同一页面上反应路由器渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！