Маршрутизатор React по-прежнему отображает предыдущую страницу после маршрутизации к новому компоненту

Я делаю целевую страницу для своего сайта, которая будет иметь 3 компонента - верхний, главный и нижний колонтитулы, только для целевой страницы. Компонент заголовка - это просто панель навигации с логотипом слева и кнопкой входа справа.

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

Вот мой App.js файл, в который вставлен лендинг.

import React, {Component} from 'react';

import Landing from './components/Landing/Landing';

class App extends Component {
    render() {
        return (
            <div className="App">
                <Landing/>
            </div>
        );
    }
}

export default App;

и в компоненте Landing у меня есть такая настройка:

import React, {Component} from 'react';

import Header from './Header';
import Main from './Main';
import Footer from './Footer'

class Landing extends Component {
    render() {

        return (
            <div className="container__landing">
                <Header/>
                <Main/>
                <Footer/>
            </div>
        );
    }
}

export default Landing;

Вот мой компонент заголовка, для краткости я оставил два других компонента:

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

class Header extends Component {
    render() {
        return (
            <Router>
                <header className="header">
                    <div className="header__nav">
                        <p>STRONG LIVE</p>
                        <button className="sign_in">
                            <Link to="/login">
                                Sign In
                            </Link>
                        </button>
                    </div>
                    <Route exact path="/login" component={Login}/>
                </header>
            </Router>
        )
    }
}
export default Header;

Компонент входа в систему отображается, но он помещается внутри компонента лендинга вместе с заголовком и другими присутствующими компонентами.

Я хочу, чтобы страница входа была автономной и без заголовка, который в настоящее время находится над ней. Я видел какой-то учебник, в котором они использовали props.history.push('/path), но в React Dev Tools ни один из моих компонентов не имеет этих свойств. Как переключать компоненты при нажатии кнопки? Спасибо.


reactjs javascript react-router
person Darth Plagueris    schedule 24.04.2019    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Когда URL-адрес будет соответствовать свойству path вашего <Route> компонента, то есть когда вы будете на странице /login, маршрутизатор React отобразит ваш <Login> компонент в том месте в вашем дереве компонентов, где находится соответствующий <Route> .

Проблема в том, что ваш <Router> и, в частности, ваш логин <Route> находятся внутри компонента <Landing>.

Если вы хотите, чтобы страница входа отображалась без заголовка, вам следует разместить компоненты <Landing> и <Login> внутри <Route>, рядом друг с другом. Затем визуализируйте их условно, используя <Switch>component React Router:

<Switch> будет перебирать все свои дочерние элементы и отображать только первый, который соответствует текущему местоположению. (подробности см. в документации)

Вот (непроверенный) пример:

class App extends Component {
    render() {
        return (
            <div className="App">
                <Router>
                    <Switch>
                        {/* Render the login component alone if we're on /login */}
                        <Route exact path="/login" component={Login} />

                        {/* Otherwise, render the Landing component */}
                        <Route component={Landing} />
                    </Switch>
                </Router>
            </div>
        );
    }
}
person Arthur Chaloin    schedule 24.04.2019
comment
Ваша точка зрения имеет для меня смысл. Можете ли вы поделиться со мной надлежащим руководством, объясняющим, как маршрутизировать компоненты из элементов списка панели навигации, а также при нажатии кнопки - person Darth Plagueris; 24.04.2019
comment
Ваш код работает. Спасибо. Раньше я пробовал обернуть компонент Landing withRouter, но не получил желаемого результата. - person Darth Plagueris; 24.04.2019
comment
Пожалуйста, поделитесь со мной хорошими ресурсами, поскольку учебные материалы, которые я видел, устарели, потому что некоторые компоненты были отделены от react-router-dom и перемещены в react-router, поэтому я не могу следить за изменениями вместе с примерами в Интернете. - person Darth Plagueris; 24.04.2019
comment
Нужно ли мне объявлять все мои маршруты в файле маршрутов или я могу использовать их только в тех компонентах, где они нужны? - person Darth Plagueris; 24.04.2019
comment
Я лично использую краткое руководство по React router, когда мне нужна информация. Единственные компоненты, которые вам действительно нужны, - это <Router>, <Route> и <Switch>. Вы можете объявить свои маршруты в любом компоненте, но они должны быть внутри <Router>, поэтому мы обычно помещаем его в корневой компонент <App>. - person Arthur Chaloin; 25.04.2019