好吧,我受够了尝试。
该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()}
,但是显然这不是目的,而且我也不会获得所需的参数。
onEnter
不再存在react-router-4
。您应该使用它<Route render={ ... } />
来获得所需的功能。我相信Redirect
示例具有您的特定情况。我在下面对其进行了修改,使其与您的匹配。
<Route exact path="/home" render={() => (
isLoggedIn() ? (
<Redirect to="/front"/>
) : (
<Home />
)
)}/>
问题内容: 使用 withRouter() 时如何获取路由上下文,位置,参数等? 您可以使用withRouter获得该信息,还是必须将这些内容显式传递到组件树中? 问题答案: 因此,不再使用。在道具中都可以使用: 因此,假设您想将用户转到新路线,您只需
问题内容: 我正在电子中创建我的第一个反应应用程序(也是我的第一个电子应用程序)。我有两条路线,需要从一条导航到另一条。为此,我使用以下代码: 根 应用程式 页 这行给出了错误, 我在网上搜索了可能的解决方案,但找不到!SO上也有许多类似的问题,但是对我来说都没有作用:( 问题答案: 您现在必须从历史记录模块中导入它,该模块提供了3种不同的方法来创建不同的历史记录。 适用于支持历史记录API的现代
问题内容: 使用此样板作为参考,我创建了一个Electron应用程序。它使用webpack捆绑脚本并通过Express Server托管脚本。 的WebPack配置是实质上相同的这个和服务器这样。 Electron的脚本加载: 然后index.html加载服务器托管的脚本: 我运行以构建应用程序并启动服务器,该服务器使用webpack将脚本捆绑在一起。 它工作正常,我的React组件App已安装。
我正在学习使用旧版本React路由器的教程。除了下面的代码,我已经更新了所有的代码,并且可以工作了:
两者都有路由、链接等。什么时候使用其中一种?我真的很困惑在哪里使用每一个。服务器端?客户端? https://reacttraining.com/react-router/ 在一些例子中,你需要通过历史,在另一些例子中则不需要。要怎么做? vs 什么时候使用一个或另一个真的很混乱,任何帮助都值得赞赏。
问题内容: 我是ReactJS和React-Router的新手。我有一个组件,通过props 从 react-router 接收一个对象。每当用户单击该组件内部的“下一步”按钮时,我都希望手动调用对象。 现在,我正在使用 refs 访问 支持实例, 并手动单击生成的’a’标记。 问题: 有没有办法手动调用链接(例如)? 这是我目前的代码: 这是我想要的代码: 问题答案: v4推荐的方法是允许您的r