部署 React 应用，Router 不正确

Question

我正在开发 React 应用程序并尝试在 IIS 上进行部署。

它工作正常，但路由器显示不正确。

当我点击链接“测试”时，我的预期路径是“http://localhost/test/TestRouter/”，但它显示的是“http://localhost/TestRouter/”。

这是我的代码：

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/",

然后我在 IIS 上部署，在 Default Web Site/test 下

我的问题是当我点击“测试”链接时，网址现在显示为“http://localhost/TestRouter/”。

我的期望是 url 应该显示 'http://localhost/test/TestRouter/'。

这里有人可以帮我纠正路由器吗？

先谢谢你了。

Answer 1

您需要将basename添加到路由器：

 <Router basename='/test'>

Answer 2

path="test/TestRouter"

有直接填充路径的选项

<Router>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/test/TestRouter">Test</Link>
        </li>
      </ul>
    </nav>
    <Route path="test/TestRouter" component={Test} />
  </div>
</Router>

和选项喜欢这里的评论

<Router basename='/test'>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/TestRouter">Test</Link>
        </li>
      </ul>
    </nav>
    <Route path="/TestRouter" component={Test} />
  </div>
</Router>

你确定你按照它写的那样尝试了吗？