请教react-router 的 clean url是什么鬼

发布于 2022-09-04 12:25:24 字数 5791 浏览 12 评论 0

在学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((
<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.

<link rel="stylesheet" href="/index.css">

<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](../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((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="/repos" component={Repos}>
        <Route path="/repos/:userName/:repoName" component={Repo}/>
      </Route>
      <Route path="/about" component={About}/>
    </Route>
  </Router>
), 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

<!doctype html public="storage">
<html>
<meta charset='utf-8'/>
<title>My First React Router App</title>
<link rel='stylesheet' href='index.css'>
<div id='app'></div>
<script src="bundle.js"></script>

about.js

import React from 'react'

export default React.createClass({
  render() {
    return <div>About</div>
  }
})

app.js

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

export default React.createClass({
  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><NavLink to="/" onlyActiveOnIndex>Home</NavLink></li>
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/repos">Repos</NavLink></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

Home.js

import React from 'react'

export default React.createClass({
  render() {
    return <div>Home</div>
  }
})

NavLink.js

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

export default React.createClass({
  render() {
    return <Link {...this.props} activeClassName="active"/>
  }
})

Repo.js

import React from 'react'

export default React.createClass({
  render() {
    return (
      <div>
        <h2>{this.props.params.repoName}</h2>
      </div>
    )
  }
})

Repos.js

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

export default React.createClass({
  render() {
    return (
      <div>
        <h2>Repos</h2>
        <ul>
          <li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
          <li><NavLink to="/repos/facebook/react">React</NavLink></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暮年慕年 2022-09-11 12:25:24

简单来说，前端设置的路由和后端的并不对应，所以你拿前端的设置的路由去请求服务器，这时会报404，通常就是你按刷新页面的时候。
而当你在服务器不做任何配置的话，为了防止这一问题，需要在路由中加上#号。路径会变成这样www.example.com/#/a，当然，react-router还会在后面加上hash值。这样的url自然就是不clean的，因为它不是一个正常的url。
文中提出的解决方法是由服务器做出设置，无论url是什么，都指向根路径，由前端路由来控制页面的跳转，这时就可以使用一个clean的url了。

回复收藏 0

~没有更多了~