如果在 React React Router 中不匹配，如何获取 Switch 的状态

Question

我正在使用 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>
    );
}

Answer 1

我们开始吧：

not-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>
    );
}

---

这里是堆栈闪电战中的DEMO。

Answer 2

试试这个。

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

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

因为，根据 Doc：

没有 path 属性的 <Route> 或没有 from 属性的 <Redirect> 将 始终匹配当前位置。

检查 Doc example 是否有“无路径匹配”。

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

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

现在在父组件的action 内设置状态。