CODEWITHSUNDEEP
react-routerbrowser-history
Stefflan00
Stefflan00

Reputation: 155

React Router browserHistory not working as expected

As a User i want to access content via going direkt on an deep url

Situation

On the Main Page i have a link to "about" page. clicking on the the Content changes as expected. The Page gets loaded and the url changes to localhost:8080/about.

If I now refresh the Page i get the error:

Cannot GET /about

I wonder if this is the normal behavior or did I miss something out?

Routes:

var React = require('react');
var ReactRouter = require('react-router');

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var browserHistory = ReactRouter.browserHistory;
var Main = require('./components/Main');
var About = require('./components/About');

module.exports = (
  <Router history={browserHistory} >
    <Route path="/" component={Main}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
)

Main:

var React = require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;

module.exports = React.createClass({
  render: function() {
    return <div>
      <div>Header!!</div>
      {this.content()}
    </div>
  },
  content: function() {
    if(this.props.children) {
      return this.props.children
    } else {
      return (
        <div>
          <h1>Main</h1>
          <Link to={'about'}>To about</Link>
        </div>)
    }
  }
});

About:

var React = require('react');
module.exports = React.createClass({
  render: function() {
    return (<div>About</div>)
  }
});

And my package.json

{
  "name": "react-starter",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browserify": "^13.0.0",
    "gulp": "^3.9.0 ",
    "gulp-concat": "^2.6.0",
    "gulp-react": "^3.1.0",
    "gulp-sass": "^2.1.1",
    "gulp-server-livereload": "1.6.2",
    "gulp-util": "^3.0.7",
    "gulp-watch": "^4.3.5",
    "node-notifier": "^4.4.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-router": "^2.0.0-rc5",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  },
  "devDependencies": {}
}

Upvotes: 12

Views: 26544

Answers (4)

LTroya
LTroya

Reputation: 540

If you are serving you react app with nginx only, you need to add this code for the / location, like this:

location / {
    try_files $uri $uri/ /index.html =404;
}

That's all.

Upvotes: 0

Johnny Gabriel
Johnny Gabriel

Reputation: 38

If you're using gulp-server-livereload, just add the fallback property pointing to your index

gulp.src(['dist'])
  .pipe(livereload({
    livereload: true,
    defaultFile: 'index.html',
    fallback: 'index.html',
    log: 'debug'
  }))

Upvotes: 0

master_dodo
master_dodo

Reputation: 1339

I had same problem. So as above @taion's answer told that we need to configure express server to make hot reloading with URLs in routes.

But if you don't want to put express server additionally just to make hot reloading work, use this to run your project.

webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors

Earlier, I was using just this which needs express server to be configured

webpack-dev-server --hot --inline

NOTE: But I still think, you need to configure for nginx when you'll deploy. The above commands I told are just for development purposes. So don't forget to look at this as @taion told.

Upvotes: 6

taion
taion

Reputation: 2837

When using browserHistory, you must configure your server appropriately to serve at all routed paths. See this for details.

Upvotes: 8

Related Questions