输入路径时触发功能(react-router-dom)

时间:2018-07-19 15:36:10

标签: reactjs react-router-dom

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,但意识到这是针对旧版本的。

这是正确的用法吗?

1 个答案:

答案 0 :(得分: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>
)