Question

我是新来的并写信询问有关React路由器的问题。我用Google搜索了两个多小时但找不到合适的解决方案。

基本上，我正在撰写一个可以显示文章列表的网站。主页上有一个名为“文章”的按钮。一旦我们点击它，路由器将工作并转到页面“/ 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”，并在每个“Route”上使用“exact”关键字，请查看react-router v4以获取更多信息：https://reacttraining.com/react-router/web/api/Switch

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

1 个答案: