React Nested Router только изменяет URL, но не отображает страницу

Question

Я новичок здесь и пишу, чтобы задать вопрос о маршрутизаторе React.Я гуглил более двух часов, но не могу найти рабочее решение.

По сути, я пишу веб-сайт, который может показать список статей.На главной странице есть кнопка «Статьи».Как только мы нажмем на него, роутер заработает и перейдет на страницу «/ article», как показано ниже:

Файл A:

import React, { Component } from 'react';
import {BrowserRouter, Route, Link, Switch} from 'react-router-dom';

class A extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <BrowserRouter>
            <div>
                <div>
                    <button><Link to = "/articles"> Articles </Link></button>
                </div>
                <Switch>
                    <Route exact path = '/articles' render = {() => <B />}/>
                </Switch>
            </div>
            </BrowserRouter>
        );
    }
}

Список статей будет отображатьсякомпонент B. Я разработал этот компонент B будет две ситуации.Во-первых, по умолчанию, когда мы нажимаем кнопку в компоненте A, URL-адрес «/ Articles», а затем отображается список статей.Во-вторых, если мы щелкнем по названию статьи, URL изменится на «article / articleID», и компонент покажет детали этого articleID.

Файл B:

import React, {Component} from 'react';
import {BrowserRouter, Route, Link, Switch} from 'react-router-dom';

class B extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <BrowserRouter>
                <div>
                        <Switch>
                            <Route exact path = "/articles" render = {(props) => <Articles {...props} />}/>
                            <Route path = "/articles/:articleId" render = {() => <ArticleDetail />}/>
                        </Switch>
                </div>
            </BrowserRouter>
        );
    }
}

Теперь моя проблема заключается в том, что когда на странице сведений о статье (когда URL-адрес страницы «/ article / articleId»), я могу нажать кнопку «Статьи» в компоненте A, и URL-адрес изменится на «/ Articles", но страница не будет отображаться, а это значит, что я все равно буду на странице сведений о статье, вместо того, чтобы вернуться на страницу со списком статей.

Если мое описание смущает вас, пожалуйста, спросите меня!Спасибо за вашу помощь!

Answer 1

Эй, я не знаю, если у вас все еще есть эта проблема, но попробуйте сделать <Route exact path = '/articles' render = {() => <B />}/> не точным.

У меня была такая же проблема, и я считаю, что когда вы переходите к /articles/:articleId, путь больше не соответствует /articles, поэтому ваш компонент больше не отображается.

Answer 2

Я думаю, что вы должны использовать компонент коммутатора только в основном компоненте приложения, например, "A", и использовать ключевое слово "точный" в каждом "маршруте", для получения дополнительной информации обратитесь к реагирующему маршрутизатору v4: https://reacttraining.com/react-router/web/api/Switch