TypeError: Cannot read property 'location' of undefined React Router useRouteMatch issue

[nikhilroy2]

I can't solve this problem, "TypeError: Cannot read property 'location' of undefined " in my reactjs project. I am trying to nesting the url for blog post but not working it, and I have test it's math by console it's take the path but nesting showing error.

Below the code which I have tried but not solving

`
import React, { Component } from 'react';
import { Router, Link, Switch, useRouteMatch } from 'react-router-dom';
export default function Blogs(){
const match = useRouteMatch();
console.log(match.path)
return (

        <div className="container-fluid px-2 text-light">
            <div className="row no-gutters py-4 border_bottom_dotted">
                <div className="col-6 mp_0">
                    <h2 className="mp_0 ">
                        Latest Blogs
            </h2>
                </div>
                <div className="col-6 mp_0 text-right text-white-50">
                    {/* <img src= alt=""/> */}
                </div>
            </div>
           
            <Switch>
                <Router exact path={match.path}> <PostListing/> </Router>
                <Router  path={`${match.path}/post1`}> <PostListing/> </Router>
            </Switch>
        

         


        </div>


    )

}

const PostListing = ()=> {
return (

<PostItem
postTitle="

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, numquam. Voluptates, vero. Quidem velit quod voluptates laudantium ea! Deserunt tempora provident voluptatem, doloremque voluptate aut.
"
/>

<PostItem
postTitle="

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, numquam. Voluptates, vero. Quidem velit quod voluptates laudantium ea! Deserunt tempora provident voluptatem, doloremque voluptate aut.
"
/>

<PostItem
postTitle="

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, numquam. Voluptates, vero. Quidem velit quod voluptates laudantium ea! Deserunt tempora provident voluptatem, doloremque voluptate aut.
"
/>

)

}

const PostItem = (props) => {
return (

        <div className="row no-gutters m-0 p-0">
            <div className="col-3 col-sm-2">
                <div className="h-100 bg-dark d-flex justify-content-center align-items-center">
                    <p className="display-4 px-2">
                    {"</>"}
                    </p>
                </div>
            </div>
            <div style={{ background: '#444' }} className="col-9 col-sm-10 card text-light">

                <div className="card-body">
                    <p className="card-text">
                        <Link to="/post1" className="text-light">{props.postTitle}</Link></p>
                </div>
                <div className="card-footer  text-white-50">
                    Post Date: {document.lastModified}
                </div>
            </div>

        </div>
    </div>
)

}

///

`