Почему для отображения реакционного маршрутизатора <Link>требуется несколько секунд - PullRequest
Новая
       2

Почему для отображения реакционного маршрутизатора <Link>требуется несколько секунд

1 голос
/ 27 марта 2020

У меня есть Маршрутизатор, обертывающий компонент коммутатора, который обрабатывает изменения URL в моем компоненте Приложения. Но когда приложение рендерится, у меня уходит несколько секунд, чтобы я смог нажать на. Кажется, что DOM не распознает тег <Link>, пока что-то не загрузится, но я не знаю, что это такое.

Приложение. js

render() {
        const {data, isLoaded} = this.state;
        return (
            <Router>
                <div className="row">
                    <NavBar/>
                    <div className="App-header"></div>
                    <Switch>
                        <Route exact path="/">
                            <div id="header" className="col App-header">
                               ...        
                            </div>
                        </Route>
                        <Route path="/tasks">
                            <Task/>
                        </Route>
                        <Route path="/projects">
                            <Project/>
                        </Route>
                    </Switch>
                </div>
            </Router>
        );
    }

NavBar.js

А потом у меня есть панель навигации, которая обрабатывает ссылки на различные URL. 

 render() {
        return (
            <div className="col-2 nav-bar">
                <div className="row title">
                    <Link to="/">MyAgenda</Link>
                </div>
                <div className="row element">
                    <Link to="/">Home</Link>
                </div>
                <div className="row element">
                    <Link to="/tasks">Tasks</Link>
                </div>
                <div className="row sub-element">
                    School
                </div>
                <div className="row element">
                    <Link to="/projects">Projects</Link>
                </div>
                <div className="row sub-element">
                    Personal Agenda
                </div>
            </div>
        )

    }
...