在反应路由器中没有调用 onEnter

好吧，我不想再试了。
onEnter方法不起作用，知道为什么吗？

// Authentication "before" filter
function requireAuth(nextState, replace){
console.log("called"); // => Is not triggered at all
if (!isLoggedIn()) {
replace({
pathname: '/front'
})
}
}


// Render the app
render(
<Provider store={store}>
<Router history={history}>
<App>
<Switch>
<Route path="/front" component={Front} />
<Route path="/home" component={Home} onEnter={requireAuth} />
<Route exact path="/" component={Home} onEnter={requireAuth} />
<Route path="*" component={NoMatch} />
</Switch>
</App>
</Router>
</Provider>,
document.getElementById("lf-app")

编辑:

当我调用 onEnter={requireAuth()}时会执行该方法，但显然这不是目的，而且我也不会得到所需的参数。

71271 次浏览
小开
最佳答案

onEnter不再存在于 react-router-4上。您应该使用 <Route render={ ... } />来获得所需的功能。我相信 Redirect的例子有你的具体情况。我修改了下面的内容来配合你的。

<Route exact path="/home" render={() => (
isLoggedIn() ? (
<Redirect to="/front"/>
) : (
<Home />
)
)}/>
小开

从反应路由器 v4 onEnter，onUpdate和 onLeave被删除, 根据 从 v2/v3迁移到 v4的文件:

on*属性
React 路由器 v3提供 onEnter、 onUpdate和 onLeave 这些实质上是重现了 React 的生命周期方法。

在 v4中，您应该使用组件的生命周期方法 由 <Route>呈现 在使用 onUpdate的地方, 你可以使用 componentDidUpdate或者 componentWillUpdate(或者 componentWillReceiveProps) componentWillUnmount.

小开

对于 react-router-6，Redirect组件已被 Navigate取代。

下面的 userState将是空或填充取决于用户是否登录，可以是您的 Redux 状态，例如。

<Route path="/protectedRoute"
element={userState ? <protectedComponent/> : <Navigate to="/login"/>}/>

提交答案