Question

这看起来很简单，但我是新手做出反应并尝试不同的方法，没有什么对我有用。（顺便说一句，我是一名定期撰稿人，但在我的客户机器上工作，并且不记得我的密码。）

react路由器的版本是4.0，使用redux存储状态。

方案是我们正在更改应用程序中的路由顺序，并希望将具有旧结构的Urls的任何用户重定向到新的Url结构。我尝试了以下内容（还要注意我已经＆＃34;擦除＆＃34;页面名称，函数调用和变量）：

我需要指示的部分有一个触发器组件，路由设置如下：

<Route path='page/:pageGuidGuid' component={PageTrigger}> </Route>

在触发器组件中，如果链接来自前一个组件，ComponentWillMount会发出一个返回404的请求，尽管它会重定向到正确的路由。我正在检查并触发getInitialState中的重定向，但该组件会一直运行生命周期并调用ComponentWillMount，从而生成404，然后重定向到正确的页面。

const PageTrigger = connectToStores(React.createClass({

getInitialState() {
    this.checkForRedirect();
    return {};
},

componentWillMount() {
    if (this.props.params.guid) {
        this.setCaseByGuid(this.props.params.guid);
    }
},
   checkFrorRedirect() {       
      /* logic to determine if it should redirect */      
      browserHistory.push(redirectUrl);
    }  
}

我也尝试过创建自定义路线...

<CaseRedirectRoute path='(cases/:caseGuid)' component={CaseTrigger}>

 </CaseRedirectRoute>

在一个单独的模块中（基于登录样本）

const CaseRedirectRoute = ({ component: Component, ...rest }) => (
<Route
  {...rest} render={props => (
    checkForCaseRedirect(...props) ? (
        <Redirect to={{
            pathname: getCaseUrlRedirectUrl(...props),
            state: { from: props.location }
        }} />
    ) : (
        <Component {...props} />
    )
)} />

）;

我从反应路由器导入了WithRouter。当我尝试运行它时，我在反应框架中遇到错误：

Uncaught Type Error: Cannot read property 'createRouteFromReactElement' of undefined
  at RouteUtils.js:68
at forEachSingleChild (ReactChildren.js:52)
at traverseAllChildrenImpl (traverseAllChildren.js:98)
at traverseAllChildrenImpl (traverseAllChildren.js:114)
at traverseAllChildren (traverseAllChildren.js:186)
at Object.forEachChildren [as forEach] (ReactChildren.js:70)
at createRoutesFromReactChildren (RouteUtils.js:65)
at Function.createRouteFromReactElement (RouteUtils.js:35)
at RouteUtils.js:69
at forEachSingleChild (ReactChildren.js:52)

我尝试从app.js和page.js重定向，但PageTrigger是第一个有状态设置的组件。我要么想弄清楚如何在重定向后停止执行，要么弄清楚为什么我的自定义路由不断爆炸。任何帮助将不胜感激。

Answer 1

我不确定您的设置，但我会实现此重定向：

<Route path='oldurl/:p1/:p2' render={
  routeProps => (
    <Redirect to={'/newUrlHere/'+routeProps.match.params.p1} />
  )
}  />

因此，如果路线匹配（如果需要，您可以指定完全匹配），当重定向＆＃34;呈现＆＃34;它会停止渲染，并应从新URL开始渲染。您可以根据需要在Redirect.to属性中构建URL

反应。如何在组件生命周期的早期重定向

1 个答案: