Question

我正在尝试在Github Pages上托管带有路由器的React应用程序。我遇到了Github Pages不支持的服务器端或客户端渲染（不知道不支持哪个渲染）。所以，我看了很多视频，但都没有用。

我终于能够获得呈现的主页，但是在使用具有基本名称和{process.env.PUBLIC_URL}的Router或HashRouter或BrowserRouter导航到下一页时，出现了404错误。无法找出问题出在哪里。

function App() {
  return (
    <div className="App">
      <NavigationBar />
      <Router>
        <div>
          <Route exact path='/' component={Rental} />
          <Route exact path='/accesories' component={Accesories} />
          <Route exact path='/insurance' component={Insurance} />
          <Route exact path='/summary' component={Summary} />
        </div>
      </Router>
    </div>
  );
}

也尝试过使用HashRouter

function App() {
  return (
    <div className="App">
      <NavigationBar />
      <HashRouter>
        <div>
          <Route exact path='/' component={Rental} />
          <Route exact path='/accesories' component={Accesories} />
          <Route exact path='/insurance' component={Insurance} />
          <Route exact path='/summary' component={Summary} />
        </div>
      </HashRouter>
    </div>
  );
}

也尝试过

import {HashRouter as Router, Route } from 'react-router-dom';

还尝试了使用带有基本名称且不带有基本名称的BrowserRouter

function App() {
  return (
    <div className="App">
      <NavigationBar />
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <div>
          <Route exact path='/' component={Rental} />
          <Route exact path='/accesories' component={Accesories} />
          <Route exact path='/insurance' component={Insurance} />
          <Route exact path='/summary' component={Summary} />
        </div>
      </BrowserRouter>
    </div>
  );
}

仅当我尝试使用路由功能导航到其他页面时出现错误，但是主页被渲染。

Answer 1

要在github页面上托管React应用

您必须在basename上设置<Router />

<Router basename={'/directory-name'}>
    <Route path='/' component={Home} />
    .... 
</Router>

2。

设置homepage文件中的app.json

homepage": "https://myapp.com/directory-name",

更新路线

<Router basename={'/subdirectory'}>
  <Route path={`${process.env.PUBLIC_URL}/`} component={Home} />
  <Route path={`${process.env.PUBLIC_URL}/yourpath`} component={yourComponent} />
  <Route path={`${process.env.PUBLIC_URL}/yourpath`} component={yourComponent} />
</Router>

4。最后，更新链接

<Link to={`${process.env.PUBLIC_URL}/page-path`}>…</Link>

无法在Github页面上使用Router / HashRouter / BrowserRouter托管React应用程序

1 个答案: