进入路由时触发函数（react-router-dom）答案

【问题标题】：Triggering a function when entering a route (react-router-dom)进入路由时触发函数（react-router-dom）
【发布时间】：2018-12-27 19:59:27
【问题描述】：

const Main = () => (
  <div>
    <Header />
    <StyledMain>
      <Header />
      <Switch>
        <Route exact path="/" component={Splash} render={()=>{alert('dd"')}}/>
        <Route path="/files" component={Files} />
        <Route path="/archived" component={Archived} />
        <Route path="/extract/:filename" component={Extract} />
        <Route path="/docs/api" component={Docs} />
      </Switch>
    </StyledMain>
  </div>
)

在我的 main.js 中，每当我进入主路由 ('/') 时，我都会尝试触发警报。但是，这不起作用。

我也试过onEnter，但发现这是针对旧版本的。

这是正确的用法吗？

【问题讨论】：

render 属性用于在Route 的path 与 URL 匹配时呈现某些内容。将alert 放在Splash 组件构造函数中是否适合您的用例？
我不明白。 “/”路径将用户重定向到 Spalsh。
是的，但是您可以将逻辑放在 Splash 组件中，而不是在 render 属性中调用它。
我最终想要做的是放置一个身份验证模式，以便用户在没有身份验证的情况下无法访问路由。
然后您可以创建和使用 PrivateRoute 并在那里执行逻辑。

标签： reactjs react-router-dom

【解决方案1】：

您可以按照@Tholle 在评论中的建议在 Splash 组件中添加警报。但是使用render，您可以在不使用组件的情况下做到这一点：

const Main = () => (
  <div>
    <Header />
    <StyledMain>
      <Header />
      <Switch>
        <Route exact path="/" render={() => {
                alert('dd"');
                return <Splash />;
            }
        }/>
        <Route path="/files" component={Files} />
        <Route path="/archived" component={Archived} />
        <Route path="/extract/:filename" component={Extract} />
        <Route path="/docs/api" component={Docs} />
      </Switch>
    </StyledMain>
  </div>
)

【讨论】：

你可以在这里看到它在codesandbox.io/s/34yl2r41k6 工作（我使用console.log，因为它经常发出警报）
谢谢，但这不起作用。我最终想要做的是进行简单的身份验证才能访问路由。
它有效。它完成了这里的预期工作。触发警报或如您所见的日志记录。您问如何做到这一点，这回答了您的问题。
忘记删除组件。谢谢。
不客气。但是，如果您想为您的路由设置身份验证，只需转到 React Router 文档并查找它。有一个不错的 PrivateRoute 示例。