如果在React React路由器中没有匹配，如何获取交换机的状态

Posted 2021-04-16

我正在使用ReactRouter，并希望在命中RouteNotFound组件时执行类似设置状态的操作（最后一个意味着没有其他匹配的匹配）。

我的this.handler做了一个setState，这样我就可以告诉它被调用了。这当然给了我一个错误，说“无法在现有状态转换期间更新，例如在渲染中”。

有没有办法可以设置我的状态告诉我哪些（我真的想知道最后一个）switch语句执行？

render() {
    return (
        <div>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/p1" component={p1}/>
                <Route exact path="/p2" component={p2}/>
                <RouteNotFound action={this.handler} ></RouteNotFound>
            </Switch>
        </div>
    );
}

答案

开始了：

未found.js：

import React from 'react';
import { Route } from 'react-router-dom';

const RouteNoteFound = ({ action }) => (
  <Route
    render={props => (
      <NotFoundPageComponent action={action} />
    )}
  />
);


export default RouteNoteFound;

class NotFoundPageComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.props.action()
  }

  render() {
    return (
      <div>404 not found</div>
    )
  }
}

并在index.js中：

handler = () => {
    alert("alert from app.js but run in not found page")
}

render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Page} />
          <Route path="/page" component={Page} />
          <RouteNoteFound action={this.handler} />
        </Switch>
      </BrowserRouter>
    );
}

---

这里是stackblitz的DEMO。

另一答案

试试这个。

像这样定义未找到的路线：

<Route render={props => <RouteNotFound action={this.handler} />}></Route>

因为，根据Doc：

没有路径道具的<Route>或没有来自道具的<Redirect>将始终与当前位置匹配。

检查Doc example的“无路径匹配”。

现在在RouteNotFound组件中使用componentDidMount生命周期方法，每当RouteNotFound将被渲染时，将调用componentDidMount。从componentDidMount调用父函数，如下所示：

componentDidMount(){
   this.props.action();
}

现在在父组件中的action中执行setState。