React Routing Link Configuration Details

import React,{Component} from 'react'
//import {Route,BrowserRouter,Link} from 'react-router-dom'
//Rename BrowserRouter to Router
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
import { Button } from 'antd';
import './App.css';

function Home()
{
  return(
      <div>admin homepage</div>
    )
}

function Me(props)
{
  console.log(props)
  return(
      <div>admin my</div>
    )
}

function Product(props)
{
  return(
      <div>admin product page:{props.match.params.id}</div>
    )
}

export default class App extends Component {
   constructor()
    {
      super();
    }
    render()
    {
    {/*If the path is written in object form and is the same as below, pathname, search, and hash will be automatically concatenated on the url path, and state is the data passed into the component*/}
      let obj={pathname:"/me",search:'?username=admin',hash:"#abc",state:{msg:'hello'}}
      return(
        <div id='app'>
      {/*You can put multiple BrowserRouter*/}
          <Router>
        
        {/*Because the component also returns HTML content, you can directly return HTML content through the function to act as a component, but you cannot directly write HTML content*/}
          <div>  
            <Route path="/" exact component={()=><div>首页</div>}></Route>
            <Route path="/product" component={()=><div>product</div>}></Route>
            <Route path="/me" component={()=><div>me</div>}></Route>
          </div>
          {/*<Route path="/" component={function(){return <div>首页2</div>}}></Route>*/}

          </Router>
        

          
          {/*There can only be one root container inside BrowserRouter to wrap other content*/}
        {/*After adding basename='/xx', when you click Link to jump to other routes, the url will add /xx to the front of the route name, so both the route path and the route path with admin added can match the route*/}
          <Router basename='/admin'>
            <div>
                <div className='nav'>
                    <Link to='/'>Home</Link>
                    <Link to='/product/123'>Product</Link>
                  {/*You can output props in the corresponding component to view the information of the passed object, add replace to replace the previous page before the jump with the current page, and only push the current page into the stack*/}
                    <Link to={obj} replace>Personal Center</Link>
                </div>

                <Route path="/" exact component={Home}></Route>
                <Route path="/product/:id" component={Product}></Route>
                <Route path="/me" exact component={Me}></Route>
            </div>
          </Router>

        </div>
        
      )
    }
}