Question

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

我的this.handler执行了一个setState，以便我可以告诉它已被调用。这当然给了我一个错误说＆＃34;无法在现有状态转换期间更新，例如在渲染中＃34;。

有没有办法可以设置我的状态来告诉我哪些（我真的想知道最后一个）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

我们走了：

<强>未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。

Answer 2

试试这个。

定义未找到的路线：

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

因为，根据 Doc ：

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

检查 Doc example 以获取＆＃34;无路径匹配＆＃34;。

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

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

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

如果在React ReactRouter中没有匹配，如何获取切换状态

2 个答案: