在同一页面上反应路由器渲染组件答案

【问题标题】：React router render component on same page在同一页面上反应路由器渲染组件
【发布时间】：2018-09-30 01:52:41
【问题描述】：

我在我的项目中使用react router，当我点击登录按钮时，它renders 是App 组件的内容，但在same page 上显示它们。当我点击login 时，我想在new page 上显示，帮助我

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;

【问题讨论】：

标签： javascript reactjs react-router react-redux

【解决方案1】：

您似乎想通过两种方式解决这个问题

1) 使用 react-router 库中的“确切路径”属性

<Route exact path="/world" component={App}/>

2) 删除路由下方的代码并将其放入组件本身并声明自己的路由，因为您上面的代码运行主路由器，并将静态 JSX 留在路由器下方。

<Route exact path="/" component={Login}/>
<Route exact path="/world" component={App}/>

【讨论】：

最好的办法是写出组件。在顶层有一个包含所有路由的导航组件，然后有两条路由，下面有两个子组件（登录和主页）
仍然没有解决不是诊断，你得到了什么错误？您的代码如何处理更改？
我也不确定您的 App 组件中有什么 - 但如果那是您的父控制组件，请尝试将您的路由移到那里
我修改了create react app，在app.js中我修改为渲染登录组件，（上面我发布的代码属于登录组件），所以在我的app.js中它只包含那个主页默认反应应用程序。现在我的问题是，当我给本地主机时：3000 它按这个顺序给我（医生登录页面（文本），用户名文本框，密码框，然后登录按钮）现在当我点击登录时，我只期待应用程序组件要在该页面上呈现，但我得到的是这个顺序（医生登录页面（文本），{app组件}用户名文本框，密码框，然后登录按钮）
抱歉错误，我没有将路由放在单独的文件中，这就是为什么它在同一页面上执行，现在一切都按预期工作，非常感谢:)

【解决方案2】：

请务必将最具体的路线放在顶部。 React 路由将扫描每个路由，一旦找到匹配项，它会重定向到该路由，以防你没有使用 'exact' 关键字。

示例：

<Route path="/world" component={App}/>
<Route path="/" component={Login}/>

我之前遇到过这个问题，重新排序路线是解决方案，以防将来有人遇到这个问题。

【讨论】：