Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I need nested subroutes #483

Open
Misaka299 opened this issue Sep 28, 2024 · 0 comments
Open

I need nested subroutes #483

Misaka299 opened this issue Sep 28, 2024 · 0 comments

Comments

@Misaka299
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant