Question

我正在尝试使用react router导航到登录页面，但是当单击按钮时，下一页显示在同一页面上，而没有实际导航到下一页。

这是我的代码

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; 
import $ from 'jquery'; 
import { Login } from './Login';

export class Index extends Component {

  render() {

     return (
        <div>
          <div align='center'>
            <h3> Project Management System </h3>
          </div>

          <p>
             Here, you can search for the previous B.sc, M.sc and Ph.D projects that have been carried out in the department. <br/><br/>
          </p>

         <Router>
           <div>
              <Link to="/login">Continue </Link>
              <Route exact path={"/login"} component={Login}/>
          </div>
       </Router>
     </div>
);

} }

当我单击继续按钮时，应该只显示登录页面，而不显示上一页，但是在这里，它同时显示前一页和登录页面。

Here is the picture

Answer 1

-编辑-

将按钮和信息移动到另一个组件中，将其命名为Home或类似名称。

Home.js

import React from "react"
import { Link } from "react-router-dom"

const Home = () => {
 return(
  <div>
    <div style={{textAlign: "center"}}>
       <p>Your paragraph</p>

       <Link to="/login">Continue </Link>
    </div>
  </div>
 )
}
export default Home

Index.js 现在您将拥有一个更清洁的路由器

保留所有导入内容并引入Home组件

export class Index extends Component {

  render() {
  return (
    <div>
     <Router>
       <div>
          <Switch>
            <Route path="/" exact={true} component={Home}>
            <Route path="/login" component={Login}/>
          </Switch>
      </div>
   </Router>
 </div>

Answer 2

该行为的原因非常简单。您只用路由器包装了Login组件。您必须使用Switch组件创建路由才能更改视图。这是一个示例https://codesandbox.io/s/2xqxqpo550

对页面问题进行导航

2 个答案: