javascript - React Nested Router仅更改url，但不渲染页面

Question

我是新来的，写信询问有关 React 路由器的问题。我用谷歌搜索了两个多小时，但找不到可行的解决方案。

基本上，我正在编写一个可以显示文章列表的网站。主页上有一个名为“文章”的按钮。一旦我们点击它，路由器就会工作并转到页面“/articles”，如下面的代码所示。

文件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 将更改为“articles/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为“/articles/articleId”时)，我可以点击组件A中的“文章”按钮，URL将更改为“/文章”，但页面不会渲染，也就是说，我仍然会在文章详情页面，而不是返回到文章列表页面。

如果我的描述让您感到困惑，请询问我!感谢您的帮助!

Answer 1

我认为你必须在主应用程序组件中使用开关组件，例如“A”，并在每个“路线”上使用“exact”关键字，请检查react-router v4以获取更多信息:https://reacttraining.com/react-router/web/api/Switch