Компонентная структура: обмен одним компонентом на основе пути реакции-маршрутизатора

Question

Я просто изучаю Реагировать и испытываю небольшую проблему, выясняя лучшую структуру компонентов для своего приложения.

Так что это очень грубое представление моего приложения. Большинство макетов страниц будут напоминать это с некоторыми исключениями.

У меня 2 вопроса:

1) Если я хочу поменять «СПИСОК ПУНКТОВ» для «ADD ФОРМЫ ITEM», когда пользователь нажимает кнопку «Добавить BTN» в верхнем Правильно, что это лучший способ структурировать это?

У меня может быть один маршрут, который загружает компонент ListItemsPage, а затем другой с AddItemPage, но у обоих из них будет много избыточного кода (в основном другие компоненты: элементы управления боковой панели, список групп и т. Д.). Я предполагаю, что есть более простой способ справиться с такими вещами. Или, возможно, я мог бы сделать оператор if, который загружает либо список элементов, либо форму для добавления элементов на основе текущего URL-адреса.

2) Какова наилучшая стратегия для перенаправления на группу по умолчанию? Если кто-то отправляется в/group/7, мы загружаем список элементов группы 7. Однако, если кто-то отправляется в группу /, я бы хотел по умолчанию первой группе в списке групп, чтобы правая часть приложения никогда не была пустой.

Мои маршруты: (открытые для изменения их, если это будет иметь больше смысла)

<Route path="/" component={App}> {/* should go to /group/1 */} 
    <IndexRoute component={Home} /> 
    <Route path="/group/add" component={GroupAdd} /> 
    <Route path="/group/:id" component={GroupDetail} /> 
    <Route path="/group/:id/item/add" component={ItemAdd} /> 
    <Route path="/settings" component={Settings} /> 
</Route> 

Answer 1

После недолгого копания в минувшие выходные я закончил с этим раствором. Я не уверен, насколько он оптимален, но в настоящее время он отлично работает для меня.

Надеется, что это помогает кто-то там: D

Маршруту:

<Route path="/" component={App}> 
    <IndexRedirect to="/group" /> 
    <Route path="group" component={GroupMain}> 
    <Route path="add" component={GroupAdd} /> 
    <Route path=":groupId" component={GroupHome} /> 
    <Route path=":groupId/item"> 
     <Route path="add" component={ItemAdd} /> 
    </Route> 
    </Route> 
</Route> 

Где я хочу, чтобы дети появляются в GroupMain: (Где вы видите "СПИСОК ПУНКТОВ" в моем макете)

{this.props.children ? React.cloneElement(this.props.children, { propsYouWantToPassToChildren }) : ''} 

Затем обработать перенаправление по умолчанию идентификатор, в GroupMain

componentWillReceiveProps(nextProps) { 
    const { dispatch, groups, selectedGroup, params } = nextProps; 
    const { groupId } = params; 

    // The URL does not match the state. Update state. 
    if (typeof groupId !== 'undefined' && (selectedGroup !== groupId || selectedGroup.length === 0)) { 
    dispatch(selectGroup(groupId)); 
    return; 
    } 

    // No selectedGroup and No groupId in URL. Update state. 
    if (typeof groupId === 'undefined' && selectedGroup.length === 0 && Object.keys(groups).length > 0) { 
    const newSelectedGroup = Object.keys(groups)[0]; 
    dispatch(selectGroup(newSelectedGroup)); 
    this.context.router.push(`/group/${newSelectedGroup}`); 
    } 
}