React-router doesn't render component after adding history

3
votes

I'm using React with React Router and I have a very simple case:

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. If I remove the "history={appHistory}" part from the Router component, then it renders the MyTable component. I also tried using the default browserHistory from the router, same thing - doesn't work with history attribute, works without it.

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.

2
javascriptreactjsreact-router

2 Answers

1
votes

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.

Here is example on 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.

0
votes

There could be a few things here, but I would try createHashHistory instead of 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'));