BestPractice - Meteor/React Router 4 - Homepage and Meteor.user()

1

Hi everyone,

Another post to ask you about a best practice “situation” I am having, which is disappointing as my Router is creating too many refreshs and for the point is actually not to have to refresh part of the page by using React.

I would like the following :

When I go to ‘./’ and there is no user connected it shows a homepage (without header and footer)
When I go to ‘./’ and I am connected or any other link whether I am connected ot not it should show the relevant page with a Header and a Footer.

So the fact of being not connected does not show header/footer is only true for the ‘./’ address.

How I solved it and it is not satisfying because it seems my header is rerendering all the time I change pages even between two pages with Router…

I have a first Router, the AppRouter :

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

export default AppRouter;

My index is like that :

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

So if no user the Homepage is showing if user it goes back to the SubRouter.

SubRouter is like that :

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

So this code is “working” but somehow we can see rerenders that should not happen, I am open to any idea to optimize this. Thanks in advance !

2

Ok the fact I asked the question gave me some leads : My problem is that SubRouter was rendered twice.

I did the following changes :

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

export default AppRouter;

and it seems to be working !

1 Like