node.js - 带有子文件夹的 ReactJS 生产,导航无法正常工作
问题描述
我正在努力让我的 ReactJS 产品在我网站的子文件夹中工作。
仪表板工作,当我去http://xx.xx.xx.xx/dashboard它加载,但是当我去 http://xx.xx.xx.xx/dashboard/login我得到一个 404 not found页。当我在主文件夹中托管时,它可以完美运行。
据我所知,要让它工作,我必须在 index.js 的路由器中设置子文件夹的基本名称,我这样做了。我错过了什么吗?我使用“npm run build”进行生产。
index.js
ReactDOM.render(
<MuiThemeProvider theme={getMuiTheme()}>
<Provider store={store}>
<Router basename={"/dashboard"} history={history}>
<App />
</Router>
</Provider>
</MuiThemeProvider>,
document.getElementById("root")
);
应用程序.js
export default function App() {
return (
<div>
<Notifs />
<MainContent />
</div>
);
}
MainContent.js
export default function MainContent() {
return (
<div className="container" style={{ marginTop: 20 }}>
<Switch>
<Route exact path="/" component={Landing} />
<Route path="/login" component={Login} />
<Route component={NoMatch} />
</Switch>
</div>
);
}
解决方案
推荐阅读
- deno - 从 Deno 标准输入获取值
- azure - 使用 VB.NET 将所有子目录和文件上传到 Azure 存储帐户文件共享
- r - R:识别丢失的pdf文件
- scala - scala map - 如果密钥不存在,尝试不同密钥的最佳方法是什么
- android - 华为 Mate 9 的预发布报告问题
- firebase - 如何在 Firebase 上连续运行代码并创建所有人都可以访问的数据?
- reporting-services - 参数的动态日期
- vue.js - RangeError: 超出最大调用堆栈大小 | Vue.js
- assembly - 汇编 x86_64 显示残值
- ruby - ruby bsearch,查找最后一次出现