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

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

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

Файл 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-адрес «/ article», а затем отображается список статей. Во-вторых, если мы щелкнем по любому заголовку статьи, 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», но страница не будет отображаться, а это значит, что я все равно буду на странице сведений о статье, вместо того, чтобы вернуться на страницу со списком статей.

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