我在用着react-router-dom
对于我的路由,由于我也在使用 GitHub Pages,所以我需要使用HashRouter
in my Router.jsx
like so
import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Customer from './Customer';
const MyRouter = () => (
<Router>
<Switch>
<Route path="/customer" component={Customer} />
<Route path="/" component={Home} />
</Switch>
</Router>
);
export default MyRouter;
In my Home.jsx
组件我已经像这样定义了我的 propTypes
Homepage.propTypes = {
history: PropTypes.shape({ // set by react-router
push: PropTypes.func.isRequired,
}).isRequired,
};
我的问题是每次我得到一个#
在我的 URL 中,我想知道为什么它一直存在,为什么我的本地主机没有#
将我重定向到相同的 URL,但使用#
(就像如果我去http://localhost:4000/myApp/ http://localhost:4000/myApp/它会将我重定向到http://localhost:4000/myApp/#/ http://localhost:4000/myApp/#/)。我想摆脱它以进行跟踪。我尝试过使用BrowserRouter
但它不起作用,以及路由器的历史参数,例如history={createHashHistory({ queryKey: false })}
or history={browserHistory}
.
非常感谢(对我的英语感到抱歉)
由于客户端 React 应用程序的前端性质,路由有点麻烦。两个主要路由器选项的功能如下:
HashRouter
在 URL 中使用哈希符号,这会导致服务器请求中忽略所有后续 URL 路径内容(即,您发送“www.mywebsite.com/#/person/john”,服务器会获取“www.mywebsite.com”) ”。结果服务器会返回预#
URL 响应,然后是帖子#
路径将由客户端反应应用程序解析来处理。
BrowserRouter
不会附加#
但是,当您尝试链接到页面或重新加载页面时,会产生问题。如果显式路由存在于您的客户端 React 应用程序中,但不存在于您的服务器上,则重新加载和链接(任何直接命中服务器的内容)将返回 404 未找到错误。
这个问题的解决方案可以在这篇广泛的帖子中看到:https://stackoverflow.com/a/36623117/2249933 https://stackoverflow.com/a/36623117/2249933
主要原则是,将客户端路由与服务器上的路由相匹配,这样就允许干净的 url,但不受浏览器路由器本身的限制。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)