From Next to CRA, routing and layout issues-CodePudding

I had a very swell project going on in Next.js but I decided to revert back to Create React App yesterday and ran into some issues along the way.

I'm trying to keep a persistent layout along the app pages, that are separated from the pages themselves. Yet they appear on every route, even the auth pages, which have their own layout. "/" will either show the landing page that shouldn't contain the AppLayout or the home/feed page that should, if the user is authenticated. I'm unsure at what level I should be approaching this.

Another thing is that the user's profile data should only return on "/:username", instead of it loading on all of the pages with a param in the base URL "/". I'm making unnecessary graphql calls on /explore, /notifications, etc from that route. I'm not trying to change it to anything else such as, /u/:username and would rather find a solution that works for my case, even if that means replacing my router library for something else.

Any insight would be appreciated, this is /routes/Router.js:

import { Route, Switch } from "wouter";

import Login from './auth/Login'
import Signup from './auth/Signup'
import Verify from './auth/Verify'
import Reset from './auth/Reset'

import Root from './Root'
import Explore from './app/Explore'
import Notifications from './app/Notifications'
import Messages from './app/Messages'
import Bookmarks from './app/Bookmarks'
import Lists from './app/Lists'
import Profile from './app/Profile'
import Settings from './app/Settings'

import AppLayout from "../components/AppLayout";

export default function Router() {
    return (
        <>
            <Route path="/i/flow/login" component={Login} />
            <Route path="/i/flow/signup" component={Signup} />
            <Route path="/i/verify/:token" component={Verify} />
            <Route path="/i/flow/reset/:token" component={Reset} />
            <Route path="/i/flow/reset" component={Reset} />

            <Switch>
                <AppLayout>
                    <Route path='/' component={Root} />
                    <Route path='/explore' component={Explore} />
                    <Route path='/notifications' component={Notifications} />
                    <Route path='/messages' component={Messages} />
                    <Route path='/bookmarks' component={Bookmarks} />
                    <Route path='/lists' component={Lists} />
                    <Route path='/settings' component={Settings} />
                    <Route exact path='/:username' component={Profile} />
                </AppLayout>
            </Switch>
        </>
    );
}

CodePudding user response：

Sorry, wouter doesn't seem to include an exact attribute so I don't think that will make a difference.

Also, I'm pretty sure AppLayout will be rendered regardless of which route is active because it itself is not in a route.

Instead do something like this for each route where you'd like it to appear:

 <Route path='/'>
    <AppLayout>
        <Root/>
    </AppLayout>
 </Route>

Regarding the '/:username' issue, is it rendering the profile route every time regardless of the path?