Реагируйте на навигацию по страницам - PullRequest
Новая
       5

Реагируйте на навигацию по страницам

0 голосов
/ 05 января 2019

Я пытаюсь перейти на страницу входа в систему, используя реагирующий маршрутизатор, но при нажатии кнопки следующая страница отображается на той же странице без фактического перехода на следующую страницу.

Вот мой код 

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

} }

Когда я нажимаю кнопку «Продолжить», она должна показывать только страницу входа в систему, не показывая предыдущую страницу, но здесь она показывает как предыдущую страницу, так и страницу входа.

Вот картинка

Ответы [ 2 ]

0 голосов
/ 05 января 2019

Причина такого поведения очень проста. Вы завернули только компонент Login с роутером. Вы должны создать маршруты с компонентом Switch, чтобы изменить представления. Вот пример https://codesandbox.io/s/2xqxqpo550

0 голосов
/ 05 января 2019

- Edit -

Переместите свою кнопку и информацию в другой компонент, назовите его «Домой» или что-то подобное.

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>
...