如何在 react-router 4 中将哈希添加到 url

Question

我想将哈希添加到我在 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 />          
        );
    }
}

Answer 1

有两种解决方法：

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

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

Answer 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>
);

如何在 react-router 4 中将哈希添加到 url

How to add hash to urls in react-router 4

routing

url-routing

reactjs

react-router