Why don't I see my page rendered on a new react routing page?

Question

I added a new page to my application, that is identical to other working ones, but for some reason it does not render.

The page is simple:

export function Test() {
    return (
        <div>
            <h1>TEST working</h1>
        </div>
    );
}

In my App.tsx I have:

import './assets/App.css';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Route, Routes } from 'react-router-dom';
import { Layout } from './components/layout/Layout';
import { appRoutes } from './utils/appRoutes';

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: 5 * (60 * 1000), // 5 mins
            cacheTime: 10 * (60 * 1000), // 10 mins
        },
    },
});

function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <Layout>
                <Routes>
                    {appRoutes.map((route, index) => {
                        const { element, ...rest } = route;
                        return (
                            <Route key={index} {...rest} element={element} />
                        );
                    })}
                </Routes>
            </Layout>

            <ReactQueryDevtools />
        </QueryClientProvider>
    );
}

export default App;

My appRoutes has other identical pages, that work. However the new one does not:

import { Test } from '../pages/Test/Test';

export const appRoutes = [
    {
        path: baseUrl + '/SomeOtherPage',
        element: <SomeOtherPage />,
    },
    {
        path: baseUrl + '/Test',
        Element: <Test />,
    },
];

Going to localhost /Test renders just the layout, without the page. But other pages work correctly. I have the correct elements imported. What am I missing?

Answer 1

It looks like there's a small typo in your appRoutes definition. In your route for the Test component, you've used Element with a capital "E", but in your App.tsx you're destructuring with element in lowercase (const { element, ...rest } = route;).