【问题标题】:React Routing, refresh does not render specific view, but redirects to parent viewReact Routing,刷新不渲染特定视图,而是重定向到父视图
【发布时间】:2018-04-23 22:57:50
【问题描述】:

这是我们的父视图: http://localhost:8080/#/dashboard/

当我单击指向菜单导航的链接时: http://localhost:8080/#/dashboard/menu-navigation

这将加载正确的menu-navigation 视图,但是如果我刷新应用程序会返回到/dashboard 而不是停留在menu-navigation

来自主 Routes.js

const Routes = () => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route path="/login" exact component={Login} />
        <Route path="/redirect" component={FirebaseRedirector} />
        <Route path="/restricted-access" component={RestrictedAccess} />
        <Route path="/change-password/:hash?" component={ChangePassword} />
        <Route path="/reset-password" exact component={ResetPassword} />
        <Route path="/" component={Main} />
        <Route path="*" component={NotFound} />
      </Switch>
    </ConnectedRouter>
  </Provider>
);

export default Routes;

请注意,登录后,上面的 Main 组件已加载:

render() {
  return (
    <Main
      user={this.props.user}
      signOut={this.signOut}
    >
      <Switch>
        <Route
          path="/dashboard/categories/unmatched-api/:id?"
          component={CategoriesUnmatchedApi}
          notExact
        />
        <Route path="/dashboard/menu-navigation" exact component={MenuNavigation} />
        <Route path="/dashboard/home-screen" exact component={HomeScreen} />
        <Route path="/dashboard/categories/product-config" component={CategoryProductConfig} />
        <Route path="/dashboard/categories/:category?" component={Categories} />
        <Route path="/dashboard/playground" exact component={Playground} />
        <Route path="/dashboard" exact component={Drafts} />
        <Route path="/" exact component={Drafts} />
        <Route path="*" component={NotFound} />
      </Switch>
    </Main>
  );
}

这是导航到 MenuNavigation 路由后的状态

然后是刷新后的状态

似乎反应路由器不尊重&lt;Route path="/dashboard/menu-navigation"

刷新后我确实注意到 Main.js 路由部分被命中 3 次,第一次 this.props.location 是正确的,但接下来的 2 次只是 /dashboard

【问题讨论】:

  • 在Router初始化并尝试匹配路由后,不是你的Redux store推送登录信息吗?

标签: javascript reactjs react-router react-router-redux


【解决方案1】:

想通了!我们每次都会重定向到 /dashboard。

在我们的登录操作中:

onAuthStateChange -> checkAuth 其中包含:

dispatch(push(authDasboardView));

移除对 authDashboardView 的调度后,这解决了问题!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-04-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-28
    相关资源
    最近更新 更多