在学react-router，看到一个关于clean-url,不懂，请教大神。

这clean url 具体又什么用

README.md开始

# Clean URLs with Browser History

The URLs in our app right now are built on a hack: the hash. It's 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((

{/* ... */}

), 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.

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

---

[Next: Production-ish Server](../11-productionish-server/)

README.md 结束

index.js

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
import Repo from './modules/Repo'
import Home from './modules/Home'

render((
  
    
      
      
        
      
      
    
  
), document.getElementById('app'))

package.json

{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --content-base ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "http-server": "^0.8.5",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
}

index.html

about.js

import React from 'react'

export default React.createClass({
  render() {
    return 
About
  }
})

app.js

import React from 'react'
import NavLink from './NavLink'

export default React.createClass({
  render() {
    return (
      

        
React Router Tutorial
        

          
Home
          
About
          
Repos
        
        {this.props.children}
      

    )
  }
})

Home.js

import React from 'react'

export default React.createClass({
  render() {
    return 
Home
  }
})

NavLink.js

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return 
  }
})

Repo.js

import React from 'react'

export default React.createClass({
  render() {
    return (
      

        
{this.props.params.repoName}
      

    )
  }
})

Repos.js

import React from 'react'
import NavLink from './NavLink'

export default React.createClass({
  render() {
    return (
      

        
Repos
        

          
React Router
          
React
        
        {this.props.children}
      

    )
  }
})