I need nested subroutes

[Misaka299]

Describe the bug

function App() {
    return (<>
        <div class="flex flex-col flex-grow">
            <Router>
                <Route exact path="/login" component={LoginPage}/>
                <Route path="/*" component={MainPage}/>
            </Router>
        </div>
    </>)
}

const MainPage = (props) => {
    const navigate = useNavigate();
    const OnSelectNavigate = (name, data) => {
        console.log(name, data);
        navigate(data);
    };
    return <>
        <div class="flex items-center p-4 gap-2 h-14 border-b border-gray-200">
            <Image src={AppLogo} layout="responsive" width="40px" height="40px"/>
            <div class="text-blue-400 font-bold text-2xl">my app</div>
        </div>
        <div class="flex flex-row flex-grow">
            {}
            <div class="flex w-60 border-r border-gray-200">
                <Menu class="flex-grow" activeName="1" onSelect={OnSelectNavigate}>
                    <MenuItem name="1" data={"/menu1"} icon={<Icon name="list"/>}>menu1</MenuItem>
                    <MenuItem name="2" data={"/menu2"} icon={<Icon name="clock"/>}>menu2</MenuItem>
                </Menu>
            </div>
            <div class="flex flex-grow">
                <Router base={props.base}>
                    <Route path="/menu1" component={menu1Page}/>
                    <Route path="/menu2" component={menu2Page}/>
                </Router>
            </div>
        </div>
    </>;
};

export default MainPage;

Now, although you can access the correct page through the URL, the route is not switched and loaded normally when navigating through the menu.

Your Example Website or App

none

Steps to Reproduce the Bug or Issue

This is a project created using Vite.
Refer to the provided code.

Expected behavior

What I hope is that when using nested sub-routes, when switching between different sub-routes, the page skeletons such as menus and titles will not be refreshed and reloaded. only the content of the sub-route will be updated.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[ryansolid]

You can do this by defining all your routes at the top level. The reason we do this is so that we can know all the preload functionality above code splitting boundaries so we can parallelize fetching. For example your app could look like:

function App() {
    return (<>
        <div class="flex flex-col flex-grow">
            <Router>
                <Route exact path="/login" component={LoginPage}/>
                <Route path="/" component={MainPage}>
                  <Route path="/menu1" component={menu1Page}/>
                  <Route path="/menu2" component={menu2Page}/>
                </Route>
            </Router>
        </div>
    </>)
}

const MainPage = (props) => {
    const navigate = useNavigate();
    const OnSelectNavigate = (name, data) => {
        console.log(name, data);
        navigate(data);
    };
    return <>
        <div class="flex items-center p-4 gap-2 h-14 border-b border-gray-200">
            <Image src={AppLogo} layout="responsive" width="40px" height="40px"/>
            <div class="text-blue-400 font-bold text-2xl">my app</div>
        </div>
        <div class="flex flex-row flex-grow">
            {}
            <div class="flex w-60 border-r border-gray-200">
                <Menu class="flex-grow" activeName="1" onSelect={OnSelectNavigate}>
                    <MenuItem name="1" data={"/menu1"} icon={<Icon name="list"/>}>menu1</MenuItem>
                    <MenuItem name="2" data={"/menu2"} icon={<Icon name="clock"/>}>menu2</MenuItem>
                </Menu>
            </div>
            <div class="flex flex-grow">
                {props.children}
            </div>
        </div>
    </>;
};

export default MainPage;

Does something like that work for you?