in Switch Route Routing time it's working, but now latest new Routes, Route it not working custom route

user_18075403 0
Viewed 21

in Switch Route Routing time it's working, but now latest new Routes, Route it not working custom route I have wrapped the navbar page and home page in HomeLayoutHOC can anyone help me :) how to do this latest version I try but so many things. no result for this

I want 'HomeLayoutHOC " route instead of "Route"

->client\src\App.JSX : 
//HOC
import HomeLayoutHOC from "./HOC/Home.Hoc";
import { Route, Routes } from "react-router-dom";
//Component
import Temp from "./Components/temp";

function App() {
  return (
    <>
      <Routes>
        <HomeLayoutHOC path="/" exact element={Temp} />       // <--- I want this to work! 
       // <Route path="/" element={<Temp />} />    //              <-- this working fine 
      </Routes>
    </>
  );
}

export default App;

result

screenshot!

->client\src\index.jsx :

 import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.CSS";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

-> client\src\HOC\Home.Hoc.jsx

import React from "react";
import { Route } from "react-router-dom";

// Layout
import HomeLayout from "../Layout/Home.Layout";

const HomeLayoutHOC = ({ component: Component, ...rest }) => {
  return (
    <>
      <Route
        {...rest}
        component={(props) => (
          <HomeLayout>
            <Component {...props} />
          </HomeLayout>
        )}
      />
    </>
  );
};

export default HomeLayoutHOC;

->client\src\Layout\Home.Layout.jsx

import React from "react";

// Components
import Navbar from "../Components/Navbar";

const HomeLayout = (props) => {
  return (
    <>
      <Navbar />
      <div className="container mx-auto px-4 lg:px-20 ">{props.children}</div>
    </>
  );
};

export default HomeLayout;

please give me the possible suggestion for the latest router dom (Routes, Route)

wrapping/composing

How can I spread routeProps to make them available to your rendered Component the latest router dom (Routes, Route)

react-router-dom react-router reactjs javascript
1 Answers

react-router-dom@6 removed the need, and compatibility, for custom route components. It's an invariant violation to render anything other than a Route or React.Fragment component in the Routes component. Custom route components are replaced with the use of either wrapper components on individual routes wrapping the element being rendered, or by layout route components that can wrap any number of nested Route components.

  • Wrapper components render the children prop

    <Route
  path="/"
  element={(
    <Wrapper>
      <Componenet />
    </Wrapper>
  )}
>

  • Layout Route components render an Outlet component for nested routes to render their element prop into.

    <Route element={<Layout />}>
  <Route path="/" element={<Componenet />} />
</Route>

You are asking for the Layout Route version since it seems you want to render the Navbar component as part of a greater layout.

HomeLayout

import React from "react";
import { Outlet } from "react-router-dom";
import Navbar from "../Components/Navbar";

const HomeLayout = () => {
  return (
    <>
      <Navbar />
      <div className="container mx-auto px-4 lg:px-20 ">
        <Outlet />
      </div>
    </>
  );
};

export default HomeLayout;

App

Render HomeLayout on a pathless route as a Layout Route. The nested Route components render their content into the outlet.

import { Route, Routes } from "react-router-dom";
import HomeLayout from "./path/to/HomeLayout";
import Temp from "./Components/temp";

function App() {
  return (
    <Routes>
      <Route element={<HomeLayout />}>
        <Route path="/" element={<Temp />} />
        ... other routes to render with Home layout and Navbar ...
      </Route>
      ... other routes to render without Home layout and Navbar ...
    </Routes>
  );
}

An important aspect you should notice here is that RRDv6 removed route props, all the old "props" are now only accessible via React hooks in the routed component, i.e. useNavigate, useLocation, useParams, etc. If you are still using React class-based components they won't be able to use React hooks, and since RRDv6 also no longer exports the withRouter Higher Order Component, well, you will need to roll your own. See What happened to withRouter? I need it! for details.

user_86908570
Related