Parameterized Routing in React

 App.js

 import React from 'react'

 import {

  BrowserRouter as Router,

  Switch,

  Route,

  Link

} from 'react-router-dom'

import Home from './components/Home'

import About from './components/About'

import Greet from './components/Greet'

// Home.js -> Header.js + Content.js + Footer.js

// Blog.js -> Header.js + Comments.js + Footer.js

function App() {

  return(

      <Router>

        <Switch>

          <Route path="/" exact component={Home} />

          <Route path="/about" exact component={About} />

          <Route path="/greet/:name" exact component={Greet} />

        </Switch>

      </Router>

  )

}

export default App

Components -> Home-> index.js

import React from 'react'

import {Link} from 'react-router-dom'

export default function Home(){

    return <h1>Home. Go to <Link to="/about">About</Link></h1>

}

Components -> Greet-> index.js

import React from 'react'

import {useParams} from 'react-router-dom'

export default function Greet(){

    const params = useParams()

    console.log(params)

return <h1>Hello {params.name}</h1>

}

Components -> About-> index.js

import React from 'react'

export default function About(){

    return <h1>About</h1>

}