Multiple Path Names for a Same Component in React Router

having multiple paths to the same component in react-router-dom v6

Apparently in v6, arrays no longer work and you have to do it the old way but using element prop.

Try this:

<Route exact path="/" element={<Homepage />} />
<Route exact path="/home" element={<Homepage />} />

Working CodeSandbox.

Render Same Component With Multiple Paths React Router Dom

You could create an array that contains the paths / and /login and use map on that array to render the same thing for both paths.

<Switch>
{["/", "/login"].map(path => (
<Route
key={path}
exact
path={path}
render={() => <Login login={true} />}
/>
))}
<Redirect to="/" />
</Switch>

Render same component for 3 routes

RRDv6 routes take only a string path prop. If you need to render the same component on multiple paths you need to render a Route for each.

To make the code a little more DRY you could try mapping the routes from an array of paths.

Example:

return (
<BrowserRouter>
<Routes>
{["/", "/evens", "/odds"].map(path => (
<Route
key={path}
path={path}
element={<Table entries={posts} />}
/>
)}
<Route path="*" element={<ErrorPage />} />
</Routes>
</BrowserRouter>
);

Now whether or not this is more readable or maintainable is likely up for debate/opinion. It is less repetitive though.

Multiple path names for a same component in Reach Router

For Reach Router: (https://reach.tech/router/example/)

With the exact sample shown, the only way I can see how to do this(on a single line) is with a wildcard.

To find a way to reproduce this without side effects, we would need to see the entire nav menu.

  <Router>
<Home path="/*" />
<Chicken path="chicken">
</Router>

...

const Home = props => {
let urlPath = props["*"]
// URL: "/home"
// urlPath === "home"
// URL/: "/"
// urlPath ===""
}

You could continue with other paths below Home and the router would allow them to process.

Check out the the example using a wildcard and reach router on codesandbox, I wrote!

Note: This is a catch-all, but without parsing a parameter is the only single line solution I saw.

Some DrawBacks include Home rendering instead of '404', etc.

//This could be resolved with an if statement in your render

//It will not produce the intended URL either for /home, and I have not looked into that since it is not part of the question.. but if it matched props[*] I'm sure you could redirect or something.

You can read more about the Route Component for Reach Router.
https://reach.tech/router/api/RouteComponent

React router does not reload component if same element is used for two paths

Issue

<Route path="bookings" element={<Bookings />} />
<Route path="bookings/:bookingnumber" element={<Bookings />} />

With the same component rendered on more than 1 route, if you navigate from one route to another for the same routes component, the routed component remains mounted.

Example: If navigating from "/bookings" to "/bookings/123", or "/bookings/123" to "/bookings", or "/bookings/123" to "/bookings/456" the Bookings component remains mounted. If you've any logic that depends on the bookingnumber route path parameter then the Bookings component needs to handle this in a useEffect hook with a proper dependency on the bookingnumber param.

Solution

Use a useEffect hook to "listen" for changes to the bookingnumber param value.

Example:

const Bookings = () => {
const { bookingnumber } = useParams();

useEffect(() => {
// initial render or booking number value updated
// run logic depending on bookingnumber value to update "results"
...
}, [bookingnumber]);

...
};

React Router v6 : How to render multiple component inside and outside a div with the same path

Part of the issue is that you are rendering multiple identical paths, i.e. two "/" paths and two nested index paths. This won't work.

In react-router-dom v6 you can create what are called layout components. The layout components can render your headers and footers, sidebars, drawers, and general content layout elements, and importantly an Outlet component for the nested/wrapped Route components to be rendered into.

Example:

import { Outlet } from 'react-router-dom';

const AppLayout = ({ admin }) => admin ? (
<>
<Topbar />
<div className="container">
<Sidebar />
<Outlet />
</div>
</>
) : null;

Render the layout component into a Route wrapping the routes you want to be rendered into the specific layout.

<Routes>
<Route path="/login" element={<Login/>} />
<Route element={<AppLayout admin={admin} />}>
<Route index element={<Home />} />
<Route path="/users" element={<UserList />} />
<Route path="/user/:userId" element={<User />} />
<Route path="/newUser" element={<NewUser />} />
<Route path="/productList" element={<ProductList />} />
<Route path="/product/:productId" element={<Product />} />
<Route path="/newProduct" element={<NewProduct />} />
</Route>
</Routes>


Related Topics



Leave a reply



Submit