javascript - 为什么react-router显示需要几秒钟

Question

我有一个包装了一个开关组件的路由器，它处理我的 App 组件中的 URL 更改。但是当 App 渲染时，我需要几秒钟才能点击 . 似乎 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>
        )

    }

标签： javascriptreactjsreact-routerreact-router-dom