这是我们的父 View : http://localhost:8080/#/dashboard/
当我单击菜单导航链接时: http://localhost:8080/#/dashboard/menu-navigation
这将加载正确的 menu-navigation
View ,但是如果我刷新应用程序将返回到 /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 路线后的状态
然后是刷新后的状态
似乎 react 路由器不尊重 <Route path="/dashboard/menu-navigation"
?
刷新后我确实注意到 Main.js 路由部分被命中了 3 次,第一次 this.props.location 是正确的,但接下来的 2 次只是 /dashboard
最佳答案
想通了!我们每次都会重定向到/dashboard。
在我们的登录操作中,我们有:
onAuthStateChange
-> checkAuth
其中包含以下内容:
调度(push(authDasboardView));
删除对 authDashboardView 的调度后,问题就解决了!
关于javascript - React Routing,刷新不渲染特定 View ,而是重定向到父 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47227424/