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

Question

I am new here and writing to ask a problem about React's router. I have Googled for over two hours but cannot find a working solution.

Basically, I am writing a website that can show a list of articles. There is a button called "Articles" on the homepage. Once we click it, the router will work and go to page "/articles", like the codes below show.

File 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>
        );
    }
}

The list of articles will be shown by the component B. I designed that component B will have two situations. First, by default, when we click the button in component A, the URL is "/articles", and then a list of article shows. Second, if we click any of the article title, the URL will be changed to "articles/articleID", and the component will show the detail of that articleID.

File 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>
        );
    }
}

Now my problem is, when in the page of article details (when the page URL is "/articles/articleId"), I can click the "Articles" button in component A, and the URL will be changed to "/articles", but the page will not be rendered, which means, I will still on the page of article details, instead of returning to the page of a list of articles.

If my description confuses you, please ask me! Thank you for your help!

Answer 1

我认为您必须仅在主要应用程序组件（如“ A”）中使用开关组件，并在每个“ Route”上使用“ exact”关键字，请查看react-router v4以获取更多信息： https : //reacttraining.com/react-路由器/网络/ API /开关

Answer 2

Hey I don't know if you still have this problem, but try making <Route exact path = '/articles' render = {() => <B />}/> not exact.

I had this same problem, and I believe when you navigate to /articles/:articleId the path doesn't match /articles anymore so your component isn't rendered anymore.