getting tons of errors

[pdeva]

i see this in my console

Warning: Location "/index.html" did not match any routes
Warning: Failed propType: Required prop `location` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.
bundle.js:9659 Warning: Failed propType: Required prop `routes` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.
bundle.js:9659 Warning: Failed propType: Required prop `params` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.
bundle.js:9659 Warning: Failed propType: Required prop `components` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.
bundle.js:9659 Warning: Failed Context Types: Required child context `location` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.

Dependencies from package.json:

"dependencies": {
    "history": "^1.9.0",
    "react": "^0.13.3",
    "react-redux": "^2.1.2",
    "react-router": "^1.0.0-rc1",
    "redux": "^2.0.0",
    "redux-actions": "^0.8.0",
    "redux-react-router": "^1.0.0-beta1"
  }

This is how i render (typescript code)

React.render((
    <reactRedux.Provider store={reduxSetp.reduxStore}>
      {()=><ReduxRouter/>}
    </reactRedux.Provider>
) , document.getElementById('content'));

am i doing something wrong?

[grabbou]

Ha, had this issue in the morning as well while migrating!

Sorry, the idea was a wrong result of my Sunday refactoring.

[gaearon]

Does https://github.com/acdlite/redux-react-router/issues/42#issuecomment-139914447 really make a difference? I don't think so.

[gaearon]

Warning: Location "/index.html" did not match any routes

Isn't that the actual problem? Unfortunately I can't help with anything else because there is not enough code to understand the problem. If you open an issue, please provide the full code—otherwise we're just wasting time here. :-)

[pdeva]

@gaearon not sure what you want to see since the code is across many files.

the whole thing worked perfectly with react-router before using redux-react-router.

Here is some more code:

export const routes:ReactRouter.Route = (
  <ReactRouter.Route path="/" component={topNav.TopNavbar}>
     <ReactRouter.Route path="comments" component={cbox.CommentBox}/>
     <ReactRouter.Route path="comments2" component={redditView}/>
  </ReactRouter.Route>
);

let rootReducer =  combineReducers({ postsByReddit, router: reduxRouter.routerStateReducer });

export const reduxStore = compose(applyMiddleware(thunkMiddleware),
  reduxRouter.reduxReactRouter(
    { routes: routesFile.routes, createHistory: createHistory}
  ))(createStore)(rootReducer)

export class TopNavbar extends React.Component<any,any> {
  render() {
    return (
      <div>
        <div id="topNavBar" className="navbar navbar-inverse navbar-static-top">
          <div className="container-fluid">
              <div className="navbar-header">
                <a id="dslogo" href="#/jvms/apps" className="navbar-brand"><img src="img/dslogo.png"/></a>
              </div>
              <div className="navbar-collapse">
                  <ul className="nav navbar-nav">
                    <li><ReactRouter.Link to="/comments"><i className="fa fa-coffee"></i>&nbsp;JVMs</ReactRouter.Link></li>
                  </ul>

                </div>
            </div>
        </div>
         {this.props.children}
      </div>
    );
  }
}

Does that explain everything? Is there anything else I can post to make things clearer,

[gaearon]

1. Can you show the imports?
2. Where does index.html come from? I don't see index.html in your config. Shouldn't you open / and serve it from localhost?

[gaearon]

(Or maybe you're using hash history—that's why I'm asking about imports :-)

[gaearon]

My best guess is you were using hash history before, but now import createHistory from createBrowserHistory. This is why it interprets index.html as the route name and fails. If you import createHistory from createHashHistory it should work as before.

[pdeva]

index.html is just the file containing the webpack script. it comes from the top route '/', i assume. I dont explicity say index.html anywhere in the code.

here are some imports:

import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import {postsByReddit} from './stores/redditStore';
import reduxRouter = require('redux-react-router');
import routesFile = require('./routes');
import {createHistory} from 'history';

previously I was not using history at all.

[pdeva]

I tried changing to

import {createHistory} from 'history/lib/createHashHistory';

but same results..

[pdeva]

oops. actually it didnt compile my change last time. so when i do change it to

import {createHistory} from 'history/lib/createHashHistory';

I get

Uncaught TypeError: Cannot read property 'listen' of undefined

This is similar to #41 when i tried to use a path in the from

[gaearon]

Please post the whole project where the issue can be reproduced.

[gaearon]

This:

import {createHistory} from 'history/lib/createHashHistory';

is wrong, there is no need for a named import. It should

import createHistory from 'history/lib/createHashHistory';

(Note no curly braces.)

[gaearon]

index.html is just the file containing the webpack script. it comes from the top route '/', i assume. I dont explicity say index.html anywhere in the code.

I think we misunderstood each other. I'm saying that, in your original post, there is a warning:

Warning: Location "/index.html" did not match any routes

I'm not saying it comes from your code—I was just surprised where it's coming from at all. Normally, when using Webpack, you develop with a server like webpack-dev-server. When you do that, you don't open an HTML file in the browser—instead you visit a page like http://localhost:3000 or similar.

Therefore, I concluded that, since you have index.html in your path (judging by the warning message you posted), it means that you tried to use createBrowserHistory in a serverless environment where you'd just open index.html file. Browser history doesn't work this way—you need a local server to develop apps with it, or you'll have to handle index.html path explicitly.

You can start using createBrowserHistory just fine—but if you do, you also need to serve pages from a local server instead of opening HTML files in the browser.

[pdeva]

1. the page is indeed being browsed via webpack dev server. not just being opened in browser.
2. ok seems like the issue was indeed with the import being incorrect.

However, now while the page renders and functions properly, when i hit refresh i get a 404 error:

Eg, if path is http://localhost:8080/comments and i hit refresh I get:

Cannot GET /comments

If the path is however just http://localhost:8080, it works fine.

Here is a video. http://screencast.com/t/2jwvdD1YUq7

[gaearon]

You can avoid this by setting historyApiFallback: true in Webpack Dev Server options, like here. Hope this helps!

[pdeva]

thanks!

[amorphius]

Have exactly the same issue but html was loaded OK and there is no problem with createHistory

Warning: Failed propType: Required prop `location` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.
warning.js:48Warning: Failed propType: Required prop `routes` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.
warning.js:48Warning: Failed propType: Required prop `params` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.
warning.js:48Warning: Failed propType: Required prop `components` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.
warning.js:48Warning: Failed Context Types: Required child context `location` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.

Maybe my routes file is wrong? https://github.com/amorphius/redux-sandbox/blob/master/src/js/routes.js

[amorphius]

Fixed. It turned out I forgot to include router reducer to my root reducer

[omnidan]

@amorphius glad you managed to fix it :+1:

[joanrodriguez]

Same thing here. The "real world" example in Redux brought me here. Adding the router reduced sorted me out.