添加历史记录后，React-router 不渲染组件

Question

我将 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 组件。如果我从 Router 组件中删除“history={appHistory}”部分，那么它会呈现 MyTable 组件。我还尝试使用路由器中的默认 browserHistory，同样的事情 - 不适用于历史属性，没有它也可以。

我做错了什么？

编辑：控制台中没有错误消息，我使用的是非缩小的 React 开发版本。

Answer 1

确保你的路径是正确的！例如：如果您将路径设置为 - 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 如果您在此处设置任何其他字符串，它将不起作用。

Answer 2

这里可能有一些东西，但我会尝试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'));