Вложенные компоненты не отображаются в UIRouter - PullRequest
Новая
       7

Вложенные компоненты не отображаются в UIRouter

0 голосов
/ 26 сентября 2019

Я использую uirouter / реагировать на управление маршрутизацией в моем приложении.

App.tsx - 

import React, {Component} from 'react';
import './App.css';
import { UIRouter, UIView, pushStateLocationPlugin } from 
"@uirouter/react";

// states
import root from '../Root/ui_state';
import home from '../Home/ui_state';
import edit_component from '../ComponentEditor/ui_state';

const states = [
root,
home,
edit_component
];

const plugins = [pushStateLocationPlugin];

const config = (router: any) => {
  router.urlRouter.otherwise("/home");
};

export default class App extends Component {

  render() {
    return (
        <UIRouter plugins={plugins} states={states} config={config} >
            app
            <UIView />
        </UIRouter>
    );
   }
}

Root.tsx - 

import React, {Component} from 'react';
import {UIView, UIViewInjectedProps} from '@uirouter/react';

export default class Root extends Component<UIViewInjectedProps> {
render(){
    return(
        <div className={"root"}>
            root
            <UIView/>
        </div>
    )
}
}

Home.tsx - 

import React, {Component} from 'react';
import {UIViewInjectedProps, UIView} from '@uirouter/react';

export default class Home extends Component<UIViewInjectedProps> {

render(){
    return(
        <div className={'home'}>
            Home
            <UIView/>
        </div>
    )
}
}

ComponentEditor.tsx - 

import React, {Component } from 'react';

export default class ComponentEditor extends Component{

render(){
    return(
        <div>
            component editor
        </div>
    )
}
}

Вот мои состояния для root, home и ComponentEditor (они хранятся в отдельных файлах TSX) - 

export default {
 name: 'root',
 url: '',
 component: Root
}
export default {
 name: 'root.home',
 url: '/home',
 component: Home
}
export default {
 name: 'root.home.edit_component',
 url: '/edit_component',
 component: ComponentEditor
}

Я поместил текст в каждый компонент, чтобы отследить, что происходит.

При такой настройке, если я перехожу к «/ home» или любому неизвестному месту назначения, я вижу «app / root / home»на странице.Отображение каждого компонента было загружено и выполнено.

Если я перехожу к '/ edit_component', я перенаправляюсь на домашнюю страницу.

В состоянии edit_component, если я изменяю имя на 'root.edit_component ', затем попробуйте' / edit_component ', я получаю' app / root / edit_component ', показывая, что он работает нормально.

Таким образом, проблема идет глубже, чем "root.home", чтобы добраться до моего компонента EditComponent.

Как настроить uirouter для правильного доступа к компоненту за пределами «дома»?

...