React App Multi-Page Not showing any data when server is started?

Question

I am trying to configure a multi-page setup with REACT using router-dom. I have the code set up and everything runs fine. There are no errors. However, the actual app does not show any information at all. All the code is here: https://github.com/greglamm/PROJ_NEW I would appreciate if anybody could look at the app and see if you can figure out what is making the app not show anything on the website page. All code is in the repository. Please help if you can!!

NOTE: ALL main information is in the /mern-data/client/src directory.

Answer 1

mern-data/client/src/App.js should be a component to get rendered on mern-data/client/src/index.js, NOT a function that renders something. try changing const App function like this.

const App = () => {
    return (
        <Router>
            <Navigation />
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/data" element={<Data />} />
                </Routes>
            <Footer />
        </Router>
    );
};

Also, check the package.json file dependencies... where is react-router-dom?

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Anyways, if none of those fix your problem, may you share the console logs for more details? cause it seems there are some more errors or weird things over there

Answer 2

You have an issue in your "Route"

<Route path="/" element={<Home />} />
<Route path="/data" element={<Data />} />

Change the "element" to "component"

Documentation: https://v5.reactrouter.com/web/api/Route/component