Deploying React app, Router is not correct - reactjs

Question

I'm working on React app and trying to deploy on IIS.
It works fine but the Router is not showing correctly.
My expected path when I click the link 'Test' is 'http://localhost/test/TestRouter/' but it displays 'http://localhost/TestRouter/' instead.
Here is my code:
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Test from './Test';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/TestRouter/">Test</Link>
</li>
</ul>
</nav>
<Route path="/TestRouter/" component={Test} />
</div>
</Router>
</div>
);
}
export default App;
Test.js
import React from 'react';
class Test extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<p>Test</p>
</div>
);
}
}
export default Test;
package.json:
"homepage": "/test/",
Then I deploy on IIS, under Default Web Site/test
My problem is when I click 'Test' link, the url now displays 'http://localhost/TestRouter/'.
My expectation is that the url should displays 'http://localhost/test/TestRouter/'.
Is there anyone here can help me to correct the Router?
Thank you in advanced.

Answer 1

You need to add basename to the Router:
<Router basename='/test'>

Answer 2

path="test/TestRouter"
There is option to fill the path directly
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/test/TestRouter">Test</Link>
</li>
</ul>
</nav>
<Route path="test/TestRouter" component={Test} />
</div>
</Router>
And option like the comment here
<Router basename='/test'>
<div>
<nav>
<ul>
<li>
<Link to="/TestRouter">Test</Link>
</li>
</ul>
</nav>
<Route path="/TestRouter" component={Test} />
</div>
</Router>
Did you sure you try this as it wrote?