Question

所以，我有一个相对复杂的设置，涉及react-router和react-async-connect来渲染服务器端的东西。

这是我的路线设置：

<Route path='/' component={App}>

  <Route path='profile/:userID' component={UserProfile} />

  <Route path='*' component={NotFound} status={404} />

</Route>

因此，当有人点击profile/{userID}路径时，很明显会呈现UserProfile组件，而后者又会调用外部API来获取道具。但是，如果此API返回404，我想显示我的404页面。

问题在于，它是来自外部服务的404，而不是真实的＆＃34;路由器404.如何触发这个？

我真的想避免将NotFound组件导入UserProfile组件并以这种方式执行，看起来很脏。

Answer 1

您可以使用browserHistory功能

来实现此目的

// UserProfile.js
import { browserHistory } from 'react-router';

// In place where you need redirect to 404:
browserHistory.push('/404-page')

我认为，您可以重定向到与您定义的路线不匹配的任何路线，因为您在每条不匹配的路线上重定向到NotFound页面。

Answer 2

将您的404应用程序状态保存在store / reducer中作为默认值false。
获取404状态代码后 - 将其设置为true。
点击用户后，其他链接 - 重置为false。
在你的App.render()做这样的事情：

render() { return isNotFound ? <NotFound /> : {this.props.children}; }

Answer 3

我刚刚找到了这个图书馆react-server-status，它提供了一种友好而简单的方式来提供状态页面。

import React, { Component } from 'react';
import ServerStatus from 'react-server-status';

export default class NotFound extends Component {
    render() {
        return (
            <ServerStatus status={ 404 }>
                <div>Some content</div>
            </ServerStatus>
        );
    }
}

如何以编程方式更改React Router页面状态？

3 个答案: