没有 /#/ 无法重新加载 React 页面

Question

我可以转到我站点的根路径并导航到不同的页面，而无需 url 中的“/#/”。但是当我刷新时，它给了我 404 页面。

例如，https://kaisinlipersonal.herokuapp.com/. If you go to the portfolio page, there isn't a hash in the url, and everything seems fine. The url is https://kaisinlipersonal.herokuapp.com/portfolio. But if you refresh while on the portfolio page, https://kaisinlipersonal.herokuapp.com/portfolio 给出 404。所有其他页面都相同。

知道为什么会这样吗？

我的路线文件：

import React from 'react';
import { IndexRoute, Router, Route, browserHistory } from 'react-router';

import Main from './components/Main';
import Home from './components/Home';
import Portfolio from './components/Portfolio';
import Contact from './components/Contact';
import Blog from './components/Blog';

export default (
    <Router history={browserHistory}>
      <Route path='/' component={Main}>
        <IndexRoute component={Home}/>
        <Route path='/portfolio' component={Portfolio} />
        <Route path='/blog' component={Blog} />
        <Route path='/contact' component={Contact} />
      </Route>
    </Router>
);

我用的react-route是版本3

Answer 1

散列 (https://kaisinlipersonal.herokuapp.com/#hash) 由客户端处理。服务器甚至不知道散列是什么。

这意味着 https://kaisinlipersonal.herokuapp.com/#hash 实际上是对 https://kaisinlipersonal.herokuapp.com/ 的请求。这就是您的索引页所在的位置。

当您请求 https://kaisinlipersonal.herokuapp.com/profile 时，您将不再加载索引页。但是您需要加载索引页，因为它必须处理 URL.

所以要解决这个问题，您需要告诉您的服务器将所有请求重定向到索引文件 /。

不幸的是，我没有使用 Python/Flask 的经验（我相信您使用它作为您个人资料的服务器），但是应该有一些方法可以使用该框架来做到这一点。

没有 /#/ 无法重新加载 React 页面

Can't reload React page without /#/

javascript

url

url-routing

flask

reactjs