Route is not working after upgrading to react-route v6

Question

I had this MainRouting.js component:

import routes from '../Routes.js';
import { Routes, Route } from "react-router-dom";
import NotFound from '../Panel/NotFound';

const MainRouting = () => {
    return (
        <Routes>
            {
                routes.map(route =>
                    <Route
                        key={route.path}
                        path={route.path}
                        exact
                        element={route.component} />)
            }
            <Route path='*' element={<NotFound />} />
        </Routes>
    );
}

export default MainRouting;

It was working just fine. But now it's not working anymore after I upgraded to react-router v6.

I see this error:

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. at Routes
at MainRouting
at div
at div
at div
at Panel
at LocalizationProvider
at Router
at BrowserRouter

How can I fix this?

Note: I already updated NotFound to match new syntax.

You should show us what `route.component` is. Probably you need to call the function `route.component()`. Then rr6 introduces some changes. Check it here https://stackoverflow.com/questions/69866581/property-exact-does-not-exist-on-type/69866593#69866593 — Antonio Pantano, Dec 08 '21 at 11:25

score 0 · Accepted Answer · answered Dec 08 '21 at 14:52

For me, I had to do this:

        <Routes>
            {
                routes.map(route => {
                    const Component = route.component;
                    return <Route
                        key={route.path}
                        path={route.path}
                        element={<Component />}
                    />
                })
            }
            <Route
                path='*'
                element={<NotFound />}
            />
        </Routes>

The key was these lines:

const Component = route.component;

And

element={<Component />}

Route is not working after upgrading to react-route v6

1 Answers1