I want my React website normally to have an "app shell" (header, footer, sidebar with menu, etcetera) but for specific URI paths...I want those "app shell" elements to disappear. I am new to React and React Router, so I came up with this (incorrect) solution:
import { OuterShell } from './OuterShell';
import Home from './home';
import About from './about';
import Login from './login';
import { Route, Routes } from "react-router-dom";
function App() {
return (
<>
<MantineProvider withGlobalStyles withNormalizeCSS theme={{
fontFamily: "fantasy",
colorScheme: "dark"
}}>
<div className="App">
<Routes>
//This "OuterShell" contains my Mantine "App Shell" (header, footer, menu...).
<OuterShell>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</OuterShell>
//HERE IS THE ISSUE...
//I want this component path to render WITHOUT the "App Shell"
<Route path="/login" element={<Login />} />
</Routes>
</div>
</MantineProvider>
</>
)
}
As soon as I remove the <Route path "/login" /> element, then my app starts working again. So I conclude this is an incorrect way to use React Router.
What then is the proper way to achieve the result I'm looking for? That is, I want the Login component to be rendered full-screen, without the "app shell".
Incidentally the React Router <BrowserRouter/> element is indeed present, and is rendered outside my <App /> element. Thus my SPA is working correctly, as long as I remove that aforementioned Login route. Also, my website is built with Vite - in case that is relevant.
UPDATE
I re-studied the react-router-dom documentation, and discovered what looks like the perfect solution for my need. UNFORTUNATELY, the code feature I want doesn't work as documented. I have simplified my original code into exactly what I need, which is this:
<Routes>
<Route path="/" element={<button />}>
<Route index element={<div>WARP</div>} />
<Route path="drive" element={<div>DRIVE</div>} />
</Route>
<Route path="success" element={<div>SUCCESS</div>} />
</Routes>
According to the documentation, the above should be able to give me a button labeled with either "WARP" or "DRIVE" depending on the route. Instead, the button for those routes is rendered with no text at all!
I can force a partial result I'm looking for, minus the "success" path, with the following code:
<button>
<Routes>
<Route path="/" element={<div>WARP</div>} />
<Route path="about" element={<div>DRIVE</div>} />
</Routes>
</button>
The above code works, but for only two of the three routes I want. Again, my ideal example is supposed to work - it comes directly from the documentation but doesn't work!
Any ideas?
My dependencies:
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.1",
