React component not rendering after routing

Question

I have a main page which is first rendered, the home page has a link to the Post code page. My goal is to route from the home page to the post code page. For some reason, The code in the Postcode page doesn't render when i click the link but the url changes to /Postcode. I used the nested routing technique on the code below but when i dont make a the postcode route a child of the first route it works fine. So why doesnt it work when the second route is a nested route of the first one?

App.js code:

import logo from './logo.svg';
import './App.css';
import { Mainpage } from './components/homepage';
import Post from './components/Postcode';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Navigate,
    Link
  } from "react-router-dom";

function App() {
  return (
    <Router>
            <Routes>
            <Route  path="/" element={<Mainpage />}>
      <Route  path="/Postcode" element={<Post />}/>
        </Route>
      
            </Routes>
            
        </Router>
  );
}

export default App;

homepage.js code:

import  React from 'react';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Navigate,
    Link
  } from "react-router-dom";
export class Mainpage extends React.Component
{
  constructor(props)
  {
      super(props);
      //const current = new Date();
      this.state={
      //date: `{current.getDate()}/${current.getMonth()+1}/${current.getFullYear()}`
      };
  }
    
    render(){
        return(
            <div id="container">
                <Link to="Postcode">Postcode</Link>
                <h1>Tempthelete</h1>
                <br></br>
                <div id="d1">
                    <h3>London</h3>
                    <h4> j</h4>
                    <table>
                        <tr>
                            <td>image</td>
                            <td>Temprature</td>
                        </tr>
                        <tr>
                            <td>Partly cloudy</td>
                            <td>20-28</td>
                        </tr>
                    </table>
                    <br></br>
                    <table>
                        <tr>
                            <td>Humidity</td>
                            <td>Chance of rain</td>
                            <td> Wind speed</td>
                        </tr>
                        <tr>
                            <td>Uv index</td>
                            <td>versatlity</td>
                            <td>temp var</td>
                        </tr>
                    </table>
                    </div>

            </div>
        );
    };
}
export default Mainpage;

Answer 1

That's not how nested routing works. If you want to do nested routing, you add the nested route in the Mainpage component code, not in App.

The Route component does not take in any children that's why it doesn't work, its not a valid syntax. Nested routing refers to setting up a router within another React element, not a Route component.

You may take a look at https://reactgo.com/reactrouter/nestedrouting/ for example.