如何在 react-router 4 中向 url 添加哈希答案

【问题标题】：How to add hash to urls in react-router 4如何在 react-router 4 中向 url 添加哈希
【发布时间】：2017-05-02 18:46:33
【问题描述】：

我想在 react-router 中为我的端点添加哈希，以防止来自服务器的错误响应。我正在使用python -m SimpleHTTPServer -p 8888 创建服务器。

这个简短的例子有效，但是当我尝试在 /about 这样的路径上重新加载页面时，我收到一个错误：Error response Error code 404. Message: File not found. Error code explanation: 404 = Nothing matches the given URI.

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

const Routes = () => (
    <Router>
        <div>
            <ul>
                <li><Link to="/about">About Link</Link></li>
                <li><Link to="/company">Company Link</Link></li>
            </ul>
            <Switch>
                <Route path="/about" component={About} />
                <Route path="/company" component={Company} />
            </Switch>
        </div>
    </Router>
);

class App extends React.Component {
    render() {
        return (
                <Routes />          
        );
    }
}

【问题讨论】：

标签： reactjs routing react-router url-routing

【解决方案1】：

有两种方法可以绕过它：

1) 让您的网络服务器始终以相同的index.html 文件响应，无论路由如何。这将防止 404 错误，但并不完美，因为它不支持浏览器缓存

2) 使用HashRouter - 它将 UI 路由保留在 URL 的哈希部分中，这不应该使服务器返回 404 并将启用浏览器端缓存。这种方法的缺点是您不能使用#target 链接到网页的特定部分

【讨论】：

谢谢我错过了关于 HashRouter 的这部分文档。 这种方法的缺点是你不能使用#target 链接到网页的特定部分，你是绝对正确的，但如果它不是博客或类似的东西，那么我认为没关系。
感谢库巴！对于您的第二种方式：我知道它不漂亮，但您不能将哈希字符串与查询参数混合并将其用作#target 吗？比如说 .../page?linkTarget=contact-form
我通常最终使用查询参数而不是哈希位置，并尝试使用一个非常小且快速加载的 index.html 以适应缺少缓存
@KubaOrlik 我对您的第一个解决方案很感兴趣。有没有人可以展示如何使用 go 服务器（尤其是使用 packr ）来做到这一点。但应提供所有其他现有资产（如图像或 css 文件）以及index.html。提前致谢！

【解决方案2】：

我没仔细看文档，下面有解决办法：

const Routes = () => (
    <HashRouter basename="/#">
        <div>
            <ul>
                <li><Link to="/about">About Link</Link></li>
                <li><Link to="/company">Company Link</Link></li>
            </ul>
            <Switch>
                <Route path="/about" component={About} />
                <Route path="/company" component={Company} />
            </Switch>
        </div>
    </HashRouter>
);

【讨论】：