gpt4 book ai didi

react-router - 动态路径段 OR 404

转载 作者:行者123 更新时间:2023-12-01 06:08:32 25 4
gpt4 key购买 nike

我有一个应用程序需要在渲染 404 之前检查后端 API。路由流的工作方式如下:

请求进入/{INCOMING_PATH},应用程序尝试从 api.com/pages/{INCOMING_PATH} 获取和呈现数据。

如果 API 返回 404,则应用程序应返回 404。如果不是,则呈现数据。

我不赞成使用这个用例。 {INCOMING_PATH} 将是动态的,路径中可能带有斜杠和扩展名。这是否可以在 React Router 中实现(也具有适当的 SSR 行为)?如果是这样,我应该如何进行?

( This question was originally posted on github 另一个用户。他们被要求在此处发布,因为这是一个支持请求。但他们似乎没有这样做。我现在被困在完全相同的问题上。)

最佳答案

我用 React Nested Status 解决了这个问题模块。

我正在使用 https://github.com/erikras/react-redux-universal-hot-example所以这段代码就是为此而设计的。见 React Nested Status以获得更通用的解决方案。

对 server.js 的编辑:

在顶部

import NestedStatus from 'react-nested-status';

在底部替换:
const status = getStatusFromRoutes(routerState.routes);
if (status) {
res.status(status);
}
res.send('<!doctype html>\n' +
ReactDOM.renderToString(<Html assets={webpackIsomorphicTools.assets()} component={component} store={store}/>));

和:
const repsonse = ReactDOM.renderToString(
<Html assets={webpackIsomorphicTools.assets()} component={component} store={store}/>
);

const status = getStatusFromRoutes(routerState.routes);
if (status) {
res.status(status);
}

const nestedStatus = NestedStatus.rewind();
if (nestedStatus !== 200) {
res.status(nestedStatus);
}

res.send('<!doctype html>\n' + repsonse);

然后在您需要提供 404 的任何容器/组件中:
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import connectData from 'helpers/connectData';
import { fetchApiData } from 'redux/modules/foo/fetchApiData';
import { NotFound } from 'containers';

@connectData(null, (getReduxState, dispatch, state, params) => {
return dispatch(fetchApiData(params.fooId));
})
@connect(
(reduxState) => ({
fooData: reduxState.foo.data,
})
)
export default class ProductType extends Component {
static propTypes = {
fooData: PropTypes.object,
}

render() {
let content;
// ... whatever your api sends back to indicate this is a 404
if (!this.props.fooData.exists) {
content = <NotFound/>;
} else {
content = (
<div className={styles.productType}>
Normal content...
</div>
);
}
return content;
}
}

最后替换/src/containers/NotFound/NotFound.js
import React, { Component } from 'react';
import NestedStatus from 'react-nested-status';

export default class NotFound extends Component {

render() {
return (
<NestedStatus code={404}>
<div className="container">
<h1>Error 404! Page not found.</h1>
</div>
</NestedStatus>
);
}
}

关于react-router - 动态路径段 OR 404,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34810076/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com