时间戳

首页 > 解决方案 > 用子文件夹问题反应路由器托管

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

问题描述

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

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

这破坏了代码，并且没有按应有的方式运行。

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

我得到的问题是它导航到的当前代码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

标签： javascriptreactjsreact-routerreact-router-v4

解决方案

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

推荐阅读