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上部署

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

我的期望是该网址应显示'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>

您确定您尝试了它的写法吗？

部署React应用，路由器不正确

2 个答案:

path =“ test / TestRouter”