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
JavaScript Detect an Ajax Event
New Line in JavaScript Alert Box
Dynamically Arrange Some Elements Around a Circle
Event Delegation VS Direct Binding When Adding Complex Elements to a Page
How to Redefine a JavaScript Class's Method
Detect iPad Users Using Jquery
How to Define Setter/Getter on Prototype
Throwing Strings Instead of Errors
Why Use Object.Prototype.Hasownproperty.Call(Myobj, Prop) Instead of Myobj.Hasownproperty(Prop)
What Are the Actual Uses of Es6 Weakmap
How to Require a Controller in an Angularjs Directive
Js String.Split() Without Removing the Delimiters
How to Check If a Number Is Between Two Values
How to Highlight the Text of the Dom Range Object
Dc.Js - How to Create a Row Chart from Multiple Columns
Pass Arguments with Page.Evaluate