Реагировать на проблемы с навигацией по страницам
Я пытаюсь перейти на страницу входа в систему с помощью реактивного маршрутизатора, но при нажатии кнопки следующая страница отображается на той же странице без фактического перехода на следующую страницу.
Вот мой код
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
--Редактировать--
Переместите вашу кнопку и информацию в другой компонент, назовите его 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>
Спасибо, но проблема не устранена.
Ой, простите. Я только что понял, что у вас есть кнопка и контент в том же месте, что и ваш роутер. Если вы сделаете это, вы всегда будете отображать это. Позвольте мне переработать свой ответ, чтобы помочь вам.
Причина такого поведения очень проста. Вы обернули в роутер только компонент входа в систему. Вы должны создать маршруты с помощью компонента Switch, чтобы изменить представления. Вот пример https://codesandbox.io/s/2xqxqpo550
Маршрутизатор управляет отображаемыми компонентами. Если у вас есть контент вне маршрутизатора, например теги
h3иp. Они будут отображаться всегда, независимо от того, какой компонент визуализирует маршрутизатор. Я бы рекомендовал поместить эти строки вместе с вашимLinkв отдельный компонент, чтобы экраны отображались отдельно друг от друга.