react-router-dom 中的嵌套路由

Question

在此處輸入圖像描述

如何在反應中瀏覽選項卡。 由於我目前在選項卡中，因此我已經使用了 react 路由並且嵌套路由不起作用。 如何通過砌體進行過渡。 通過嵌套路由或其他方式？

我在里面有一個反應應用程序我有我的路由器組件

export const Container = (props) => {
return (
    <Switch>
        <Route exact path="/">
            <Redirect to={PERSONAL}/>
        </Route>
        <Route path={PAGE} render={() => <PicturesMainPage/>}/>
        <Route path={PERSONAL} render={() => <PersonalPage/>}/>
        <Route path={PERSONAL_SETTINGS} render={() => <PersonalSettingsPage/>}/>

    </Switch>

);

};

在這個組件中，我在這個組件中使用菜單繪制了有關用戶的信息，並且我想繪制其他組件以單擊菜單

導出 const PersonalPage = () => {

return (
    <div className="container">
        <PersonalInfo/>
        <div className="personal-area__galery">
            <Switch>
                <Route exact path={PERSONAL}>
                    <Redirect to={PERSONAL_GALLERY}/>
                </Route>
                <Route path={PERSONAL_GALLERY} render={() => <Gallery images={images}/>}/>
                <Route path={PERSONAL_COLLECTIONS} render={() => <Collections/>}/>
                <Route path={PERSONAL_STATISTICS} render={() => <Statistics/>}/>

            </Switch>

        </div>
    </div>
);

人員信息

let menu = [
{href: PERSONAL_GALLERY, text: "Галерея"},
{href: PERSONAL_COLLECTIONS, text: "Коллекции"},
{href: "/personal/statistics", text: "Статистика"},
];
let person = {
profileName: "Top Waifu",
profileTag : "@topwaifu",
profileDescription: "Самая топовая вайфу твоего района",
subscribers:  "5.1m",
subscriptions: 246,

};

export const PersonalInfo = (props) => {
return (
    <div>
        <div className="personal-area__profile">
            <div className="personal-area__profile__description">
                <PersonalAvatar img={"assets/img/testImg4.png"}/>
                <PersonalDescription profileName={person.profileName} profileTag={person.profileTag}
                                     profileDescription={person.profileDescription}
                                     subscribers={person.subscribers} subscriptions={person.subscriptions}
                />
                <div className="personal-area__profile__description__icons">
                    <Share/>
                    <Settings/>
                    <MoreOptions/>
                </div>
            </div>
        </div>
        <div className="personal-area__menu">
            <ul>
                {menu.map((elem, i) => <MenuElement key={i} menulink={elem.href} menuName={elem.text}/>)}
            </ul>
        </div>
    </div>
);

};

Answer 1

看看我制作的這個codeandbox。

https://codesandbox.io/s/frosty-cdn-1fn0u?file=/src/App.js

在這里，您可以看到嵌套路由的清晰示例。