Meteor/React 路由器 4 - 主页和连接的用户

Question

另一个 post 想问你关于 "situation" 我有一个问题，这令人失望，因为我的路由器创建了太多的刷新，而重点是实际上不必刷新部分使用 React 的页面。

我想要以下：

当我转到“./”并且没有用户连接时，它显示主页（没有 header 和页脚）当我转到“./”并且我已连接或任何其他 link 时，无论我是否已连接，它都应该显示带有 Header 和页脚的相关页面。

所以未连接的事实不显示header/footer仅适用于'./'地址。

我是如何解决它的，它并不令人满意，因为我的 header 似乎一直在重新渲染我甚至在使用路由器的两个页面之间切换页面....

我有第一个路由器，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>
        )
    }
}

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

Answer 1

问题来自这里：

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

export default AppRouter;

不应在此处重新呈现 SubRouter，因为它已在主页中呈现。好的代码是：

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

export default AppRouter;

Meteor/React 路由器 4 - 主页和连接的用户

Meteor/React Router 4 - Homepage and connected user

javascript

meteor

reactjs

react-router