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;

流星/反应路由器4 - 主页和连接用户

1 个答案: