React Nested Router 仅更改 url，但不呈现页面答案

【问题标题】：React Nested Router only change the url, but doesn't render the pageReact Nested Router 仅更改 url，但不呈现页面
【发布时间】：2018-06-07 22:22:30
【问题描述】：

我是新来的，写信询问有关 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”，组件将显示该文章ID 的详细信息。

文件 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会变成“/文章”，但是页面不会被渲染，也就是说，我还是会在文章详情页面，而不是回到文章列表页面。

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

【问题讨论】：

标签： javascript reactjs react-router react-redux

【解决方案1】：

我认为你必须在你的主应用组件中使用 switch 组件，如“A”，并在每个“Route”上使用“exact”关键字，查看 react-router v4 以获取更多信息：https://reacttraining.com/react-router/web/api/Switch

【讨论】：

【解决方案2】：

嘿，我不知道你是否还有这个问题，但尝试制作 <Route exact path = '/articles' render = {() => <B />}/> 不准确。

我遇到了同样的问题，我相信当您导航到 /articles/:articleId 时，路径不再匹配 /articles，因此您的组件不再呈现。

【讨论】：