Meteor/React Router 4 - 主页和连接用户答案

【问题标题】：Meteor/React Router 4 - Homepage and connected userMeteor/React Router 4 - 主页和连接用户
【发布时间】：2018-09-29 12:19:44
【问题描述】：

另一篇文章询问您我遇到的“情况”，这令人失望，因为我的路由器创建了太多刷新，而且实际上不必使用 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 是这样的：

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>
        )
    }
}

所以这段代码是“工作的”，但不知何故我们可以看到不应该发生的重新渲染，我愿意接受任何优化它的想法。提前致谢！

【问题讨论】：

标签： javascript reactjs meteor react-router

【解决方案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;

【讨论】：