Diskuze: React Routování

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Mini

Člen

Mini:24.10.2019 22:40

Ahoj, potřeboval bych pomoct s React routováním.
Používám "react-router".
Uplne v rootu mam

<Router history={env.appProvider.history}>
     <Switch>
        <PublicRoute path="/" component={LoginPage} exact={true} />
        <PublicRoute path="/data" component={DataPage} exact={true} />
    </Switch>
</Router>

Tato publicRoute je zde:

<Route
    path={this.props.path}
    exact={this.props.exact}
    render={() => (
        <AsyncComponent
            path={this.props.path}
            component={this.props.component}
        />
    )}
/>

A tato asyncComponent je zde který nezobrazí nic dokud nepřijdou data:

class AsyncComponent extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      Component: null
    };
  }

  componentDidMount() {
        this.props.routerController.getData(this.props.routePath, (controller) => {
                this.setState({
                        Component: <component controller={controller} />
                })
        })
  }

  render() {
    const { Component } = this.state;

    if (!Component) {
      return null; // LOADER
    }

    return (
      Component
    );
  }
}

A tady ukázka komponenty, které již prišel controller s naplněnými daty. (stav který chci)

class DataPage extends React.Component<IDataPageProps> {
    private controller = this.props.controller;

    render() {}
}

Ukázky kódu jsou velmi osekané, jen abych nastínil jak to zhruba vypadá.
Mám to dělané jako MVC. Tedy Každá komponenta se vytvoří s controllerem a ten v sobe má metody jak na tahání dat tak getter na Store, který reprezentuje stav componenty.
Použivám MOBX ale to asi ted není podstatné.
Můj problém je že když se mi routuje na "/data" tak nevím kdy mám vytvořit controller. Jestli až v constructoru komponenty nebo už predtím. Muj první návrh byl že jsem controller vytvořil v constructoru dané komponenty a fungovalo to. Ale nelíbilo se mi že pak v komponentě pristupuju na store přes vykřičník jelikož store se vytvořil az přijdou data. Tak jsem to chtěl udělat tak že ještě před vytvoření komponenty se zavola fetchData který vytvoří Controller a potom až se vytvoří komponenta kde do props hodím tento controller a problem je vyřešen. Jenže nefuguje mi potom router jelikož kdyz se mi routuje tak se mi už po druhé nezavolá constructor komponenty, která reší jestli už jsou data k dispozici. Jeslti jsou tak vyrenderuj komponentu jestli ne tak null. Tím padem neni nic zobrazene a jak dojde request tak se vyrenderuje daná komponenta. Použivam react-scripts s TypeScriptem. A chtěl jsem se zeptat jak tohle mám vyřešit. Abych predtím než se routuje vytvořil controller (podle routy) a až potom vyrendroval componentu s tímto controllerem. Když routuju "/data" tak se mi vytvoři dataController (asynchroně) a až potom data.component. To stejné na jinou routu. A je tento pristup vubec správný?

Děkuji moc

Zkusil jsem: Zkoušel jsem vytvořit controller přimo v contructoru každé page componenty, ale vadilo mi že data mužou byt null tím padem vsude sme mel vykričníky kvuli typu (null).

Chci docílit: Před každém routováním bych chtěl fetchnout data, hned potom vytvořit controller a potom vytvořit danou komponentu s vytvořeným controllerem. Do doby než příjdou data zobrazený loader.

Editováno 24.10.2019 22:41

Odpovědět

24.10.2019 22:40

Jste dobří jen v tom, co vás baví.

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.