Question

我在github.io

上部署我的反应应用时遇到了问题

每当我启动链接时，我都会加载404页面：myname.github.io/myapp

然后，如果我点击/saved，它会重定向到正确的'已保存'页面，但如果我点击任何'主题'页面，则会加载404页面再次使用网址：myname.github.io

我已添加：gh-pages，添加了脚本并在instruction之后运行npm run deploy。

我还添加了path={process.env.PUBLIC_URL + '/'}，但没有任何效果。

这是我的app.js：

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Home from './pages/Home';
import Saved from './pages/Saved';
import Topic from './pages/Topic';
import Result from './pages/Result';
import NoMatch from './pages/NoMatch';
import NavBar from './components/NavBar';
import './App.css';

const App = () =>
    <Router>
        <div>
        <NavBar />
        <Switch>
            <Route exact path={process.env.PUBLIC_URL + '/'} component={Home} />
            <Route exact path={process.env.PUBLIC_URL + '/saved'} component={Saved} />
            <Route exact path={process.env.PUBLIC_URL + '/topic'} component={Topic} />
            <Route exact path={process.env.PUBLIC_URL + '/result'} component={Result} />
            <Route component={NoMatch} />
        </Switch>
        </div>
    </Router>;

export default App;

2018年4月6日更新

将项目名称添加到PUBLIC_URL解决了404主页的问题。

App.js
<Route exact path={process.env.PUBLIC_URL + '/g4g-debate/'} component={Home} />

但是，所有其他链接都会导致404页面。我试过了：

App.js
<Route exact path={process.env.PUBLIC_URL + '/g4g-debate/saved'} component={Saved} />

或

<Route exact path={process.env.PUBLIC_URL + '/saved'} component={Saved} />

或

<Route exact path='/saved' component={Saved} />

在其他页面上：

<Link to={process.env.PUBLIC_URL + '/g4g-debate/saved/'}>User Profile</Link>

或

<Link to={process.env.PUBLIC_URL + '/saved'}>User Profile</Link>

或

<Link to='/saved'>User Profile</Link>

您可以在此处查看：https://vnndi.github.io/g4g-debate/

Answer 1

您不需要使用process.env.PUBLIC_URL为每个路径路径添加前缀。路线路径应该是相对的。我建议你删除它。

您没有在问题中指定process.env.PUBLIC_URL的值，但我猜是myname.github.io？

在任何情况下，您遇到的问题都是因为该应用位于https://vnndi.github.io/g4g-debate/，但当您点击User Profile链接时，它会转到https://vnndi.github.io/saved。那条路线不匹配。它应该如下：

https://vnndi.github.io/g4g-debate/saved

所以要解决问题，请删除process.env.PUBLIC_URL前缀，然后使用：

<Route exact path="/saved" component={Saved} />

Answer 2

我知道这是一个老问题，你说你放弃了它，但这些是给那些好奇的人的：

react-router-dom 支持在路由器对象上设置基本名称：

<BrowserRouter basename={'/g4g-debate'}>
  <Stuff />
</BrowserRouter>

这将自动将所有 <Link /> 和 <Route /> 设置为使用路径开头的基本路径，然后您不再需要手动包含 process.env.PUBLIC_URL。< /p>

就您收到的 404 错误而言，这也可能是由于 github 页面上的设置造成的。我不能专门与 github 交谈，但是许多托管服务都有一种设置“错误”页面的方法，当路径与不存在的内容不对应时，它将服务于该页面。在只有虚拟路径的单页应用程序中，您需要将错误页面设置为根 index.html 文件，以便它为页面提供服务，然后 react-router 将处理实际路由。

在github.io上反应路由器交换机路由不起作用gh-pages

2 个答案: