流星/反應路由器4-主頁和連接的用戶

Question

另一個帖子詢問您我所處的“狀況”，這令人失望，因為我的路由器創建了太多刷新，並且實際上不必使用React刷新頁面的一部分。

我想要以下內容：

當我轉到“ ./”並且沒有用戶連接時，它會顯示一個主頁（沒有頁眉和頁腳）。頁眉和頁腳的相關頁面。

因此，未連接的事實並不顯示頁眉/頁腳僅適用於“ ./”地址。

我如何解決它，但並不令人滿意，因為似乎我每次更改路由器時，即使在兩個頁面之間，頁面標題都一直在重新呈現。

我有第一個路由器AppRouter：

 const AppRouter = () => (
    <BrowserRouter>
        <div className="content">
            <Switch>
                <Route path="/" component={Index} exact={true} />
                <SubRouter />
            </Switch>
        </div>
    </BrowserRouter>
);

export default AppRouter;

我的索引是這樣的：

export class Index extends React.Component {
    render() {
        if (this.props.user){
            return (
                <SubRouter />
            )
        } else {
            return (
                <Homepage />
            )   
        }
    }
}

因此，如果沒有用戶，則主頁顯示是否有用戶返回到SubRouter。

SubRouter是這樣的：

export class SubRouter extends React.Component {
    (...)
    render(){
        return (
            <div className="fullpage">
            {this.state.inboxOpen ? <Inbox closeInbox={this.closeInbox} oneUserInboxId={this.state.oneUserInboxId} /> : undefined }
                <Header openInbox={this.openInbox} closeInbox={this.closeInbox} />
                <Switch>
                    <Route path="/" component={Dashboard} exact={true} />
                    <Route path="/admin" component={Admin} exact={true} />
                    <Route path="/account" component={Account} exact={true} />
                    <Route path="/settings" component={Settings} exact={true} />
                    <Route path="/faq" component={Faq} exact={true} />
                    <Route path="/cgv" component={Cgv} exact={true}/>
                    <Route path="/legal" component={Legal} exact={true}/>
                    <Route path="/login" component={Login} exact={true}/>
                    <Route path="/signup" component={Signup} exact={true}/>
                    <Route path="/notifications" render={() => (<Dashboard notifications={true} />)} exact={true} />
                    }} />
                    <Route path="/reset-password/:token" component={ResetPassword} />
                    <Route path="/forgot_password" component={ForgotPassword} exact={true} />
                    <Route path="/post/:postId" component={OnePost} />
                    <Route path="/*" component={NotFound} />
                </Switch>
                <Footer />
            </div>
        )
    }
}

因此，這段代碼是“有效的”，但是以某種方式我們可以看到不應發生的重新渲染，我願意對任何優化的想法持開放態度。 提前致謝 ！

Answer 1

問題來自這里：

 const AppRouter = () => (
    <BrowserRouter>
        <div className="content">
            <Switch>
                <Route path="/" component={Index} exact={true} />
                <SubRouter />
            </Switch>
        </div>
    </BrowserRouter>
);

export default AppRouter;

這里不應該重新渲染SubRouter，因為它已經在HomePage中渲染了。 好的代碼是：

 const AppRouter = () => (
    <BrowserRouter>
        <div className="content">
            <Switch>
                <Route path="/" component={Index} exact={true} />
            </Switch>
        </div>
    </BrowserRouter>
);

export default AppRouter;