Browserrouting only running when displaying App

user_14645819 0
Viewed 18

I build a website in react with Browserrouting and have the following code & issue

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
<React.StrictMode>
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App/>}>
                <Route path="/home" element={<Homepage />} />

The Problem I have is when i run the App it opens the "App" and not the actual Homepage. I tried to fix it by changing change the App to Homepage but it is not working. In my understanding / needs to be there so the App displays in any other Path and is functioning.

Can some explain me, how i can make the path / still the Homepage without having to type /home to get there?

Thank you !

react-router-dom react-router reactjs javascript
2 Answers

It appears you are rendering the Homepage in a nested route that is rendering App. In this configuration <Route path="/" element={<App />}> is what is called a Layout Route. App will be rendered when the path is exactly "/" and should render an Outlet component for the nested routes to render their content to.

An issue I see here, and you should have been seeing a react-router-dom invariant error regarding nesting an absolute path within a route rendering on an absolute path. In other words, "/home" is an absolute path and can't be nested under the absolute path "/"; it's not reachable.

If App really is a layout route and you always want it to render then you could remove the path prop from the parent route rendering App, and move Homepage to "/".

<BrowserRouter>
  <Routes>
    <Route element={<App />}>
      <Route path="/" element={<Homepage />} />
    </Route>
  </Routes>
</BowserRouter>

or convert Homepage into an index route and leave the "/" path on the parent layout route so the relative routing can still work properly and Homepage is rendered on "/".

<BrowserRouter>
  <Routes>
    <Route path="/" element={<App />}>
      <Route index element={<Homepage />} />
    </Route>
  </Routes>
</BowserRouter>

I should point out that this is a slightly abnormal configuration. Typically the App component would render the Routes and Route components instead of an Outlet and it's assumed to all render on "/" by default. The Homepage component would then be rendered on path="/".

Example:

<BrowserRouter>
  <App />
</BowserRouter>

...

const App = () => {
  .... app logic ....

  return (
    <Routes>
      <Route path="/" element={<Homepage />} />
    </Routes>
  );
};

There is OFC, the chance here that you didn't intend to nest these routes and want them to be matched and rendered independently. In this case the solution is to just unnest the Homepage route and continue using absolute paths for the root routes.

Example:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<App />} />
    <Route path="/home" element={<Homepage />} />
  </Routes>
</BowserRouter>
user_86908570

I found the issue

I had to

 <Route path="" element={<App/>}>
            <Route path="/" element={<Homepage />} />

Delete the Path / in App and only add Path / in Homepage.

It works now

user_146458190
Related