从CRA到CRA，路由和布局问题

Question

我在Next.js中进行了一个非常出色的项目，但我决定回到昨天创建React，并在此过程中遇到了一些问题。

我试图在应用程序页面上保持一个持久的布局，这与页面本身是分开的。然而，它们出现在每一条路线上，甚至是有它们自己的布局的第四页。"/“将显示不应该包含AppLayout的登陆页面，或者显示应该包含用户身份验证的主页/提要页面。我不知道我应该在哪一级接近这个目标。

另一件事是，用户的配置文件数据应该只返回"/:username"，而不是在基本URL "/“中使用param加载所有页面。我在该路径上对/explore、/notifications等进行不必要的graphql调用。我并不试图将它更改为其他任何东西，比如/u/:username，我更愿意找到一个适用于我的情况的解决方案，即使这意味着将我的路由器库替换为其他的东西。

任何洞察力都将不胜感激，这是/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>
        </>
    );
}

Answer 1

对不起，wouter似乎没有包含确切的属性，所以我不认为这会有什么区别。

而且，我非常肯定，无论哪个路由是活动的，AppLayout都会被呈现，因为它本身不在路由中。

相反，对于您希望它出现的每一条路线，都要这样做：

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

关于'/:username‘问题，它是否每次都呈现配置文件路由，而不管路径如何？