How to use router for switching between components with a key value pair in react

I am just stuck on this router concept. I am pretty new to react. SO I think we also have a better way of doing so. Correct me if I am doing these things wrong or if we have a better option.

This is my App.js

import React from 'react';
import './App.css';
import Header from './Header';
import Profile from './Profile';
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import PullRequests from './PullRequests';
import Overview from "./Overview";
import Repo from './Repo';

function App() {
  return (

    <Router>
    <div className="App">
      <Header />

      <Switch>

      <Route path="/">
        <Profile template= {<Overview/>} />
      </Route>

      <Route path="/tagname=Repo">
        <Profile template= {<Repo/>} />
      </Route>

      <Route path="/Pullrequests">
        <PullRequests />
      </Route>

      </Switch>
      
    </div>
    </Router>

  );
}

export default App;

This is my profile.js

import React from 'react'
import "./Profile.css"
import { Avatar} from '@material-ui/core';
import PeopleAltIcon from '@material-ui/icons/PeopleAlt';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import Underlinenav from './Underlinenav';


function Profile({template}) {


    return (
        <div className="profile">

                <div className="profile__left">

                    <Avatar src="https://avatars0.githubusercontent.com/u/68982304?s=460&u=6b37f00eb36173e0f5f5bc04db9e63066d408d80&v=4" className="profile__avatar"/>

                    <div className="profile__name">
                    <span><h4>Shivansh Sharma</h4></span>
                    <span><p>shivkaansh</p></span>
                    </div>
                
                    <button>Edit profile</button>

                    <div className="profile_leftFollow">

                        <div className="profile__options">
                        <span>< PeopleAltIcon fontSize="small" /></span>
                        <span>1 follower</span>
                        </div>

                        <p>4 following</p>
                        
                        <div className="profile__options">
                        <span>< StarBorderIcon fontSize="small"/></span>
                        <span>3</span>
                        </div>

                    </div>

                    <div className="profile_leftLoc">
                        <span>< LocationOnIcon fontSize="small" /></span>
                        <span>India</span>      
                    </div>

                </div>
                <div className="profile__right">

                <div className="profile__rightupper">
                <Underlinenav/>

                </div> 

                {template}

                </div>
            </div>
    )
}

export default Profile

I used the prop named template for routing the component in profile.js to toggle between components inside the body. But I think, It is not working as expected,

I want the component of Overview.js on path http://localhost:3000/ and Repo.js on http://localhost:3000/tagname=Repo