动态 React 路径路由与 url 不匹配，但在重新加载时匹配答案

【问题标题】：Dynamic React path Routing not matching url but matches on reload动态 React 路径路由与 url 不匹配，但在重新加载时匹配
【发布时间】：2021-03-29 04:14:08
【问题描述】：

。我正在尝试使用动态路由和使用 React Link 标签移动到 url。问题是它更改了 url 但没有重新呈现 ui。当我使用锚标记或刷新页面时，它会呈现。我一直在尝试检测问题，但我目前陷入困境。我在下面实现了类似的东西，并且工作正常。

这是我的 App.js 的 sn-p

// Front end pages
if (isFrontEndPage()) {
    return (
        <Layout className="app-container">
            <AppHeader />
            <Layout>
                <AppSidebar />
                <Content className="app-content" breakpoint="lg">
                  <div className="container" style={{ minHeight: '100vh', padding: '10px' }} >
                        <Switch>   
                            <Route path="/" exact component={Home} />
                            <Route path="/pricing" exact component={Pricing} />
                            <Route path="/features" exact component={Features} />

                            <Route path="/help/search/result.html" exact component={Post} />
                            <Route path="/help" exact render={(props) => <Redirect to="/p/help/invoices/index.html" /> } />
                            // I have a problem with this
                            <Route path="/p/:postType/:postCategoryUrlTitle/:postUrlTitle.html" component={Post} />
                            // I also have a problem with this
                            <Route path="/:postUrlTitle" component={Post} />
                            
                            <Route component={NotFound} />
                        </Switch>
                      </div>
                    </Content>
                </Layout>
                <AppFooter />
            </Layout>
        )

    }

    return (
        <Layout className="app-container">
            <AppHeader />
            <Layout>
                <AppSidebar />
                <Content className="app-content" breakpoint="lg">
                  <div className="container" style={{ minHeight: '100vh', padding: '10px' }} >
                    <Switch>   
                        // The below similar links actually render accurately with dynamic routing
                        <PrivateRoute path="/posts/info-posts/new" component={InfoPost} />
                        <PrivateRoute path="/posts/info-posts/info-post/:infoPostId" component={InfoPost} />
                        <PrivateRoute path="/posts/info-posts" component={InfoPosts} />
                         
                        <**************** OTHER PATHS ***********************>
                        <PrivateRoute component={NotFound} />
                    </Switch>
                  </div>
                </Content>
            </Layout>
            <AppFooter />
        </Layout>
    );

}

export default App;

下面是我的 Index.js 的 sn-p

  ............
  ReactDOM.render(
    <BrowserRouter>
        <AuthProvider>
            <App />
        </AuthProvider>
    </BrowserRouter>,
    document.getElementById('root')
);

【问题讨论】：

欢迎使用 stackoverflow。您应该将您的代码减少到一个最小的示例（即说明问题的最少代码）。这使得有人阅读它的可能性更大（即愿意花时间理解您的代码）。
感谢@kca 的评论。我会这样做的。

标签： javascript reactjs

【解决方案1】：

当使用 React 的 Link 组件时，页面不会刷新，它只是切换组件/视图，这就是 Link 的工作方式。如果您使用锚标记，页面会刷新。不确定您的应用中到底发生了什么，但据我所知，我注意到您正在为更多路线链接相同的组件，也许这就是您的 UI 没有改变的原因

【讨论】：

它实际上与锚标签一起使用。您的回答实际上让我注意到当从不同的组件链接到 Post 组件时视图会发生变化，并且当从 Post 组件链接到另一个组件时它也会发生变化。我想知道问题出在哪里，如果我已经在 Post 组件中并且另一个 url 仍然链接到同一个 Post 组件，因为它是动态路由，我如何根据 url 更改视图。谢谢。

【解决方案2】：

终于解决了问题。因为我已经在我想要路由到的组件中，所以我需要做的就是使用 React 钩子“useRouteMatch”在检测到“useRouteMatch”的参数属性发生变化时使用“useEffect”再次实际渲染组件。

...
const {postType, postCategoryUrlTitle, postUrlTitle } = useRouteMatch().params;
...

useEffect(() => {
    // Now do stuff with the params
}, [postType, postCategoryUrlTitle, postUrlTitle]);

【讨论】：