我正在使用React Router和我的应用程序,本地一切都很好。下面是我的代码。问题是当我在线托管它时,它在my-application
子目录中:
https://www.example.com/my-application
这是破坏代码,它没有发挥应有的作用。
有人能建议如何解决这个问题吗?如果有什么不清楚的请随时问。我已经尝试了无数的方法,但无法让它工作。一个答案可以看到here。
我得到的问题是,与当前的代码,它导航到https://www.example.com/test
,而不是https://www.example.com/my-application/test
。我以为如果我硬编码的网址,它会工作,但这也打破了应用程序。
下面的代码被略微删减以删除多余的代码。
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
2条答案
按热度按时间z8dt9xmd1#
应用配置更改pacakage.json添加主页作为您的文件夹名称
myzjeezk2#
为了解决这个问题,我做了两件事:
1.添加了“主机名”:“https://www.example.com/my-application“在package.json的顶部。
1.已将basename=“my-application”添加到浏览器路由器,例如
<BrowserRouter basename="my-application">
注意:我使用create-react-app创建了这个项目,我使用的是react版本18和react路由器版本6。