用子文件夹问题反应路由器托管

Question

我在我的应用程序中使用 react 路由器，并且在本地一切正常。下面是我的代码。问题是当我在线托管它时，它位于 my-application 子目录中：

https://www.example.com/my-application

这破坏了代码，它不能正常运行。

谁能建议如何解决这个问题？如果有任何不清楚的地方，请随时询问。我尝试了无数方法，但无法让它发挥作用。一个答案可见here。

我遇到的问题是，当前代码导航到https://www.example.com/test，而不是https://www.example.com/my-application/test。我想如果我在 url 中硬编码它会起作用，但这也会破坏应用程序。

为了去掉多余的代码，下面的代码被稍微删减了。

import React, { Component } from 'react';
import styled from 'styled-components'
import { Route, Switch } from 'react-router-dom'


const Home = ({ avatarUrl }) => {
  return (
      <div>
         <Route exact path="/" component={Overview}/>
         <Route path="/test" component={Test}/>
      </div>
  );
};

class App extends Component {

  render() {

    return (
      <section>
        <Nav avatarUrl={ this.props.avatarUrl }/>
        <Switch>
          <Route path="/example" component={Example}/>
          <Route path="/" render={()=><Home
            avatarUrl={ avatarUrl }
          />}/>

        </Switch>
      </section>
    )
  }
}

export default App

Answer 1

应用配置更改 pacakage.json 添加主页作为您的文件夹名称