url 正在更改，但在 react-router 中没有查看答案

【问题标题】：url is changing but not view in react-routerurl 正在更改，但在 react-router 中没有查看
【发布时间】：2021-03-02 07:34:32
【问题描述】：

以下是我的 App 组件

                <BrowserRouter>
                    
                    {/* on top of all the pages */}
                    <Nav/>

                    <Switch>

                        <Route path="/profile">
                            <HostingFormProfile/>
                            <Footer/>
                        </Route>
                        
                        <Route path="/hosting">
                            <Hosting/>
                        </Route>
                        
                        <Route path="/">
                            <Home/>
                            <Footer/>
                        </Route>

                    </Switch>                        

                </BrowserRouter>

以下是我的托管组件

      <BrowserRouter>
            <Switch>
                <Route path="/hosting/map">
                    <div className="hosting__map">
                        <Map
                            google={props.google}
                            center={{lat: lat, lng: lng}}
                            height='300px'
                            zoom={15}
                        />
                    </div>
                </Route>

                <Route path="/hosting/form">     
                    <HostingForm/>
                </Route>

                <Route path="/hosting">
                    <HostMain/>
                </Route>
            </Switch>
      <BrowserRouter>

现在当我在 'HostingForm' (url "/hosting/form") 或 'Map' (url "/hosting/map") 组件中并执行 "history.push("/hosting"); " 然后只有 url 被改变而不是视图。如何解决这个问题？

【问题讨论】：

首先我要提一下，在HostingComponent 中，您不应该在路径开头使用/hosting。因为它来自父母的路线。现在，您的路线如下：/hosting/hosting/...
不工作，当我从 'HostingForm' (url "/hosting/form") 或 'Map' (url "/hosting/map") 执行 history.push('/hosting') 然后仅更改 url 不查看 & 我想显示“HostMain”组件（url“/hosting”）
您看到this 示例了吗？

标签： reactjs react-redux react-router-dom

【解决方案1】：

如果您还没有，请尝试使用withRouter 包装您的<Hosting> 组件。

import {withRouter} from "react-router"
.
.
.
export default withRouter(Hosting)

【讨论】：

尝试但问题仍然存在

【解决方案2】：

你应该在应用组件中添加这个。

       <Route path="/hosting/*">
          <Hosting/>
       </Route>

【讨论】：