刷新页面时反应组件消失（使用反应路由器）答案

【问题标题】：React component disappears when I refresh the page (using react router)刷新页面时反应组件消失（使用反应路由器）
【发布时间】：2020-09-01 11:46:04
【问题描述】：

我在使用 React 路由器时遇到问题。在我的示例中，当路由为 http://localhost:3000/ingredient-collection/ 并刷新页面时，页面会正常刷新，但当路由为 http://localhost:3000/ingredient-collection/cones 并且我刷新时，组件会消失。

这是我第一次使用react路由器，请你帮帮我

这是我的 App.js：

    return (
  <Router>
    <MuiThemeProvider theme={theme}>
      <Provider store={store}>
        <div className={classes.minSize}>
          <div className='mobileNavBar'>
            <NavBarMobile
              handleClick={this.handleClick} />
          </div>
          <div className='desktopNavBar'>
            <NavBarDesktop />
          </div>
          <MenuBar
            menuAnimation={menuAnimation}
            handleClick={this.handleClick}
          />
          <BackDrop
            menuAnimation={this.state.setOpen}
            handleClick={this.handleClick}
          />
          <Switch>
            <Route exact path="/"><GerHome /></Route>
            <Route exact path="/machine-collection"><GerMachineCollection /></Route>
            <Route exact path="/ingredient-collection"><GerIngredientPageRouter /></Route>
            <Route exact path="/enquiry-collection"><GerEquipmentPageRouter /></Route>
            <Route exact path="/enquiry-form"><EnquiryForm /></Route>
            <Route exact path="/contact-form"><ContactForm /></Route>
          </Switch>
          <FooterBar style={{ position: 'fixed', bottom: '0' }} />
        </div>
      </Provider>
    </MuiThemeProvider>
  </Router>
);

}

这是 GerIngredientsPageRouter.js：

const GerIngredientPageRouter = () => {
let { path, url } = useRouteMatch();
return (
    <Router>
        <div className="PageRouterBackground">
            <span className="MainRouterHeader">Zutaten</span>
            <AppBar position="static" className="RouterMenu">
                <div className="TabRouterContainer">
                    <Tab
                        label="Saucen"
                        className="TabProdRouterIngredients"
                        component={Link}
                        exact to={`${url}`} />
                    <Tab
                        label="Waffelbecher/-hörnchen"
                        className="TabProdRouterIngredients"
                        component={Link}
                        exact to={`${url}/cones`} />
                    <Tab
                        label="Toppings"
                        className="TabProdRouterIngredients"
                        component={Link}
                        exact to={`${url}/toppings`} />
                    <Tab
                        label="Fertigmix"
                        className="TabProdRouterIngredients"
                        component={Link}
                        exact to={`${url}/mix`} />
                    <Tab
                        label="Pulver"
                        className="TabProdRouterIngredients"
                        component={Link}
                        exact to={`${url}/powder`} />
                </div>

            </AppBar>
            <Switch>
                <Route exact path={`${path}`}>
                    <GerSyrupsColPage />
                </Route>
                <Route path={`${path}/cones`}>
                    <GerConesColPage style={{ margin: '0' }} />
                </Route>
                <Route path={`${path}/toppings`}>
                    <GerToppingsColPage />
                </Route>
                <Route path={`${path}/mix`}>
                    <GerMixColPage />
                </Route>
                <Route path={`${path}/powder`}>
                    <GerPowderColPage />
                </Route>
            </Switch>
        </div>
    </Router>
)

}

【问题讨论】：

我目前无法对此进行测试，但您可以在您的Route 组件中将path 替换为url 吗？我的意思是path={'${url}/cones'} 而不是path={'${path}/cones'}

标签： reactjs react-router

【解决方案1】：

这是因为您的路线将 exact 属性设置为 true。这意味着GerIngredientPageRouter 只会在location.pathname 是/ingredient-collection 时呈现。只需删除exact，路由就会匹配：

<Route path="/ingredient-collection"><GerIngredientPageRouter /></Route>

【讨论】：

请检查我的问题link

【解决方案2】：

您的路由组件path 与Tabs 中指定的组件不匹配。

使用从useRouteMatch 提取的url 而不是path。

例如：

<Route exact path={`${url}`}>
  <GerSyrupsColPage />
</Route>
<Route path={`${url}/cones`}>
  <GerConesColPage style={{ margin: '0' }} />
</Route>

【讨论】：