Динамический сегмент пути ИЛИ 404

У меня есть приложение, которое нужно проверить с бэкэндом API перед визуализацией 404. Поток маршрутизации что-то вроде это работает:Динамический сегмент пути ИЛИ 404

запрос приходит к/{INCOMING_PATH}, и попытка применения к извлекать и отображать данные с api.com/pages/{INCOMING_PATH}.

Если API возвращает 404, приложение должно вернуть 404. Если нет, данные будут визуализированы.

Я не продаюсь при использовании для этого прецедента. {INCOMING_PATH} будет динамическим, потенциально с косой чертой и расширениями в пути. Возможно ли это реализовать в React Router (с надлежащим поведением SSR)? Если да, то как мне следует продолжить?

(This question was originally posted on github другим пользователем. Им было предложено разместить его здесь, как это запрос на поддержку. Но это не кажется, что они сделали. Теперь я застрял на точно такой же вопрос.)

источник

2016-01-15 SystemicPlural

Я ve решил это с модулем React Nested Status.

Я использую https://github.com/erikras/react-redux-universal-hot-example, поэтому этот код ориентирован на это. См. React Nested Status для более общего решения.

правок server.js:

в верхнем

import NestedStatus from 'react-nested-status';

на дне заменяющее:

с:

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> 
    ); 
    } 
}

источник

2016-01-22 17:40:15 SystemicPlural

-1

Я не уверен, какой из состояния реализации вы используете. Но, если вы используете redux, то я думаю, что самый простой способ - использовать redux-simple-router. С его помощью ваши маршруты синхронизируются в вашем состоянии, поэтому вы можете отправлять создателям действия для изменения пути маршрутизатора. Я попытался бы обновить satate с создателями действий вместо того, чтобы нажимать состояние непосредственно из компонента. Истинной точкой должно быть всегда состояние, в вашем случае я бы действовал следующим образом:

Компонент, который требует для извлечения данных, будет подписан на «dataReducer», который является изолированной государственной частью, которой этот компонент должен заботиться , Возможно, начальное состояние dataReducer представляет собой пустой массив. Затем, в componentWillMount вы посылаете действие, как: dispatch(fetchDataFromApi)) Если код отклика 404, то в действии fetchDataFromApi вы можете разослать другое действие, то есть просто объект, как это:

{type:SET_NOT_FOUND_ERROR}

Это действие будет обрабатываться с помощью редуктора dataReducer, и вернет новое состояние с объектом (рассмотрим Immutability), который будет иметь ошибку свойства, которая будет строкой с причиной или тем, что вы хотите.

Затем, в методе componentWillReceiveProps, вы можете проверить, есть ли следующиеПрограммы имеют или не имеют ошибки. Если ошибка, вы можете отобразить компонент своей ошибки или даже отправить действие, чтобы перейти на страницу с ошибкой, обработанную обработчиком реакции.

Если нет ошибок, то вы можете направить действия (спасибо Redux-простой-маршрутизатор), чтобы перейти на пути у

источник

2016-01-27 15:49:59 jgldev

Проблема не в том, чтобы сделать с Redux государства. Это связано с тем, как изменить статус редукционного маршрутизатора с кода 200 на код 404 изнутри контейнера или компонента. EG, когда состояние редукции сообщает, что оно должно. – SystemicPlural

Динамический сегмент пути ИЛИ 404

ответ

Смежные вопросы