[英]React-router doesn't render component after adding history
我正在使用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'));
但是,这不会呈现MyTable组件。 如果我从路由器组件中删除“history = {appHistory}”部分,则它将呈现MyTable组件。 我也试过使用路由器的默认browserHistory,同样的事情 - 不能使用历史属性,没有它。
我究竟做错了什么?
编辑:控制台中没有错误消息,我正在使用React的非缩小开发版本。
确保你的路径是正确的! 例如:如果您将路径设置为 - path="/"
并且您的域名为example.com
- 并且您正在使用example.com/someanothepath
响应 - 您的路径将无法正常工作。
以下是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'));
正如你所看到的 - 如果你在这里设置任何其他字符串,jsfiddle路径是/_display
_display,它将无法工作。
这里可能有一些东西,但我会尝试使用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.