[英]React-router doesn't render component after adding history
I'm using React with React Router and I have a very simple case: 我正在使用React和React Router,我有一个非常简单的案例:
var Router = window.ReactRouter.Router;
var useRouterHistory = window.ReactRouter.useRouterHistory;
var Route = window.ReactRouter.Route;
var createHistory = window.History.createHistory;
const appHistory = useRouterHistory(createHistory)({ queryKey: false });
// my component ...
ReactDOM.render((
<Router history={appHistory}>
<Route path="/" component={MyTable}>
</Route>
</Router>
), document.getElementById('table-wrapper'));
However, this doesn't render the MyTable component. 但是,这不会呈现MyTable组件。 If I remove the "history={appHistory}" part from the Router component, then it renders the MyTable component.
如果我从路由器组件中删除“history = {appHistory}”部分,则它将呈现MyTable组件。 I also tried using the default browserHistory from the router, same thing - doesn't work with history attribute, works without it.
我也试过使用路由器的默认browserHistory,同样的事情 - 不能使用历史属性,没有它。
What am I doing wrong? 我究竟做错了什么?
EDIT: there is no error message in the console and I'm using the non-minified, development version of React. 编辑:控制台中没有错误消息,我正在使用React的非缩小开发版本。
Make sure that your path is correct! 确保你的路径是正确的! For example: if you set path to -
path="/"
and your domain is example.com
- and you are using react on example.com/someanothepath
- your path will not work correctly. 例如:如果您将路径设置为 -
path="/"
并且您的域名为example.com
- 并且您正在使用example.com/someanothepath
响应 - 您的路径将无法正常工作。
Here is example on jsffidle 以下是jsffidle的示例
var
useRouterHistory = ReactRouter.useRouterHistory,
createHistory = History.createHistory,
Router = ReactRouter.Router,
Route = ReactRouter.Route;
const appHistory = useRouterHistory(createHistory)({ queryKey: false });
var MyTable = React.createClass({
render: function() {
return (
<div className="test">
table
</div>
)
}
});
ReactDOM.render((
<Router history={appHistory}>
<Route path="/_display" component={MyTable}>
</Route>
</Router>
), document.getElementById('table-wrapper'));
As you can see - jsfiddle path is /_display
if you set any other string here, it will not work. 正如你所看到的 - 如果你在这里设置任何其他字符串,jsfiddle路径是
/_display
_display,它将无法工作。
There could be a few things here, but I would try createHashHistory
instead of createHistory
. 这里可能有一些东西,但我会尝试使用
createHashHistory
而不是createHistory
。
const Router = window.ReactRouter.Router;
const useRouterHistory = window.ReactRouter.useRouterHistory;
const Route = window.ReactRouter.Route;
const createHashHistory = window.History.createHashHistory;
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });
// my component ...
ReactDOM.render((
<Router history={appHistory}>
<Route path="/" component={MyTable} />
</Router>
), document.getElementById('table-wrapper'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.