首页 > 解决方案 > 带有子文件夹的 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>
  );
}

标签: node.jsreactjsroutesreact-routerrouter

解决方案


推荐阅读