当前位置: 首页 > 面试题库 >

在React-Router中未调用onEnter

尉迟晔
2023-03-14
问题内容

好吧,我受够了尝试。
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