Question

我在应用程序内部有一个react-redux应用程序和react-router v4

是否有一种方法可以捕获所有输入的无效URL并将它们保存到数组中，例如['https://mysite.co/progects', 'https://mysite.co/sometypo', 'https://mysite.co/something']？

然后我想将该数据发送到服务器，以建立一些重定向和一些站点地图

目前我有这个：

 <Switch>
              {/* <Route path='/blog' exact component={Blog} /> */}
              <Route path='/projects/:id' component={ProjectDetails} />
              <Route path='/career/:id' component={CareerDetails} />
              <Route path='/apply-for-job' render={(props) => (
                <ModalWindow
                  {...props}
                  modalHeader='Apply form'>
                  <ApplyForm history={props.history} />
                </ModalWindow>
              )} />
              <Route exact path='/' component={withScrollPreservation(LandingPage)} />
              <Route component={NoMatch} />
              {/* <Route component={withScrollPreservation(LandingPage)} /> */}
            </Switch>

Answer 1

如果您想将输入val captor = ArgumentCaptor.forClass(classOf[Batch]) verify(batchRepository).create(any(), captor.capture) captor.getValue should matchPattern { case Batch(_, _, Some(1)) => } // or just `captor.getValue.infoReceived shouldBe Some(1)`的某人重定向到'/progects'-很好，这是一个不错的UX，但是您的'/projects'块将被数十个可能的无效网址所困扰。如我所见，也许您应该在Switch的底部添加<Redirect to='/main' />，以便将任何无效的url重定向到Main component（或您拥有的任何一个）或404-Component。

如果您仍想收集它们，则不必将它们重定向到特定的Switch组件，而不是重定向到Main或404组件，在那里您可以通过Error获取链接并进一步处理该链接。组件：发送到服务器，在本地/会话存储中设置该URL，等等。

请注意，您将需要一种将数据存储到某个位置的方法，该数据在卸载时不会清除。

为了将用户引导至该路由，您需要将其放置在this.props.history.location的底部。

Switch

实际上，您需要做的就是像这样处理<Switch> ...{your routes} <Route component={Error} /> </Switch>组件中的那些网址

NoMatch

Answer 2

在NoMatch组件中，您可以使用逻辑来更新不匹配/不正确的网址

class NoMatch extends React.Component {
   componentDidMount() {
     const { addNoMatchUrl } = this.props;
     // you might want to handle the duplicate url logic here too in addNoMatchUrl method
     addNoMatchUrl(this.props.location.pathname);
   }
   componentDidUpdate(prevProps) {
      const { location, addNoMatchUrl } = this.props;
      if (location.pathname !== prevProps.location.pathname) {
          addNoMatchUrl(location.pathname);
      }
   }
   render() {
      // render logic
   }
}

export default connect(null, {addNoMatchUrl});

如何保存输入的错误无效网址？

2 个答案: