Steve Lindemann decb140c93 rackt->reactjs 8 anos atrás
..
modules decb140c93 rackt->reactjs 8 anos atrás
README.md 83b73a3061 Add #86 manually. 8 anos atrás
index.css 4e5eb34864 Change tutorial structure to individual folders for each lesson 8 anos atrás
index.html 4e5eb34864 Change tutorial structure to individual folders for each lesson 8 anos atrás
index.js 4e5eb34864 Change tutorial structure to individual folders for each lesson 8 anos atrás
package.json 4e5eb34864 Change tutorial structure to individual folders for each lesson 8 anos atrás
webpack.config.js 4e5eb34864 Change tutorial structure to individual folders for each lesson 8 anos atrás

README.md

Clean URLs with Browser History

The URLs in our app right now is built on a hack: the hash. Its the default because it will always work, but there's a better way.

Modern browsers let JavaScript manipulate the URL without making an http request, so we don't need to rely on the hash (#) portion of the url to do routing, but there's a catch (we'll get to it later).

Configuring Browser History

Open up index.js and import browserHistory instead of hashHistory.

// index.js
// ...
// bring in `browserHistory` instead of `hashHistory`
import { Router, Route, browserHistory, IndexRoute } from 'react-router'

render((
  <Router history={browserHistory}>
    {/* ... */}
  </Router>
), document.getElementById('app'))

Now go click around and admire your clean urls.

Oh yeah, the catch. Click on a link and then refresh your browser. What happens?

Cannot GET /repos

Configuring Your Server

Your server needs to deliver your app no matter what url comes in, because your app, in the browser, is manipulating the url. Our current server doesn't know how to handle the URL.

The Webpack Dev Server has an option to enable this. Open up package.json and add --history-api-fallback.

    "start": "webpack-dev-server --inline --content-base . --history-api-fallback"

We also need to change our relative paths to absolute paths in index.html since the urls will be at deep paths and the app, if it starts at a deep path, won't be able to find the files.

<!-- index.html -->
<!-- index.css -> /index.css -->
<link rel=stylesheet href=/index.css>

<!-- bundle.js -> /bundle.js -->
<script src="/bundle.js"></script>

Stop your server if it's running, then npm start again. Look at those clean urls :)


Next: Production-ish Server