score:0
issue
element={((<home />), (<header />))}>
is actually a comma operator expression, which when evaluated returns the value of the last operand, <header />
in your case.
solution
to convert the react-router-dom@5
code
</switch>
...
<route path="/home">
<header />
<home />
</route>
</switch>
to react-router-dom@6
api/syntax, replace the switch
component with the routes
component and move the routed content onto the route
component's element
prop:
<routes>
...
<route
path="/home"
element={(
<>
<header />
<home />
</>
)}
/>
</routes>
if rendering the header component with several routes it is common to create layout routes that render common ui and an outlet
for nested routes to render their element into.
example:
import { outlet } from 'react-router-dom';
const headerlayout = () => (
<>
<header />
<outlet />
</>
);
...
<routes>
... routes w/o header
<route element={<headerlayout />}>
<route path="/home" element={<home />} />
... other routes to render with header
</route>
</routes>
score:0
to upgrade your package to v6 you need to first uninstall react-router-dom package & then try to install using the below command-
npm install react-router-dom@6
Source: stackoverflow.com
Related Query
- How can I match if the current route matches a pattern in React Router Dom v6?
- React router dom - Link. How can I put an ID into the path of Link
- How can i use param in path as prop react router dom v6
- How can I add multiple path for home page with react router dom 6?
- How can I navigate to a nested Route in React Router Dom V6
- How can I define the route for the following schema in react router dom
- How can I have active nav link in React with React Router Dom but just on big screens until my breakpoints kick in?
- React: How much can I manipulate the DOM React has rendered?
- How to configure webpack dev server with react router dom v4?
- How to get params in component in react router dom v4?
- How can I pass data using <Redirect> in react router v4?
- How can I use history.push('path') in react router 5.1.2 in stateful component?
- Can not pass state with react router dom v6 beta, state is null
- React Router DOM — How to include a navigation bar on every page?
- How to handle empty URL parameter in react router dom (4.xx)
- How can i access the current hash location on react router 2?
- How to scroll to top on route change with react router dom v6?
- How can I split React Router into multiple files
- How can I append external DOM to React component?
- How we can convert client side rendering react js app to server side rendering using react router 4?
- How to add more than one Outlet component react router dom V6?
- How can I use previous location to redirect user in react router v6?
- How can I test React Router with Jest?
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How to get params in nested routes on react router dom v4?
- How can I testi React Router with Jest
- How can I exactly match routes nested deeply in react router 6?
- How can I scroll to a page when doing React Router history push in my case
- how to get params using react router dom v5.0.1
- How can I solve this problem. React Router not updating routing on hosting
More Query from same tag
- ReactJS - .JS vs .JSX
- Two React-hook-form form onSubmit error, submit both when submit one
- If within a map with arrow syntax
- React - Converting Class to Function Components For Front-End
- How to listen or get json in React app from another app making a POST localhost?
- Return data matched on basis of query parameter
- React Redux Firebase Upload File Object
- Set a default ref value on React?
- Reactjs Redux updating data values from the state/store with an input
- ReactJs custom submit button component not working
- textarea component with highlighted text in react js
- How to return error from Flask so JavaScript catches it
- Using event.target with React components
- useEffect warning while setState is used inside it
- hover underline - react router link vs styled-component link
- Should this event handler I have used in react be called a function method or just a method or static function what is it?
- How to implement server to server callback for rapidoreach SDKs?
- Drag and Drop in React using hooks
- How to display and hide elements correctly in Reactjs
- React render list only when data source changes
- eslint error Unary operator '++' used no-plusplus
- Editable React table: pass data between components
- React input slider Hooks
- Using @Material-UI Tabs as Navbar
- How to change className dynamically with more than one ternary involved?
- Can I set state inside a useEffect hook
- Using onBlur to set focus in a React component
- Find right solution to include React + TypeScript at the same time in Laravel Mix webpack.mix?
- On catching error, model closes but I want to display error
- React-flow line width