이제까지의 예제들을 보면 URL에 해시를 이용하고 있는 것을 확인 할 수 있다.
이 해시는 Hash History 라는 것을 이용해 라우팅을 설정하는 것고 한다.
어째든 해시를 이용하다 보니 URL이 쓰레기 같은게 붙어서 움직임으로 이를 없애는 것이 목적이다.
1. index.js 파일에 대하여 hashHistory 를 browserHistory 로 변경한다.
[binrang@binrang 10-clean-urls]$ pwd
/home/binrang/react/react-router-tutorial/lessons/10-clean-urls
[binrang@binrang 10-clean-urls]$ vi 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'))
|
이 파일을 아래와 같이 수정한다.
import React from 'react'
import { render } from 'react-dom'
// hashHistory를 browserHistory로 변경
import { Router, Route, browserHistory, 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={browserHistory}>
{/* hashHistory를 browserHistory 로 변경 */}
<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'))
|
저장을 하고 웹을 띄워서 확인해 보자.
[binrang@binrang 10-clean-urls]$ npm start
> tutorial@1.0.0 start /home/binrang/react/react-router-tutorial/lessons/10-clean-urls
> webpack-dev-server --inline --content-base .
events.js:160
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE 127.0.0.1:8080
at Object.exports._errnoException (util.js:1026:11)
at exports._exceptionWithHostPort (util.js:1049:20)
at Server._listen2 (net.js:1257:14)
at listen (net.js:1293:10)
at net.js:1403:9
at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)
npm ERR! Linux 3.10.0-229.el7.x86_64
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "start"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! tutorial@1.0.0 start: `webpack-dev-server --inline --content-base .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tutorial@1.0.0 start script 'webpack-dev-server --inline --content-base .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the tutorial package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --inline --content-base .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs tutorial
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls tutorial
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/binrang/react/react-router-tutorial/lessons/10-clean-urls/npm-debug.log
|
이런... 모지?. 이 에러는 무엇이냐... 별거 아니다.. webpack 서버가 이미 구동되어 있다라는 것이다. 아마 전에 했던 예제에서 띄워놓은 것을 깜박하고 놔두었나보다..
프로세스를 확인하고 죽인 후 다시 실행하면 별일 없이 뜬다.
 |
| 홈화면... 익숙하다. |
 |
| 클릭해서 들어가면 URL이 깔끔하다. |
 |
| 보기 좋군... |
 |
| 깔끔하다.. |
 |
| URL란에 직접 입력하고 쳤더니..헐.. 이런 에러가... |
이 부분을 해결해 보자.. 이 부분은 서버쪽의 환경을 변경해야 한다.
[binrang@binrang 10-clean-urls]$ pwd
/home/binrang/react/react-router-tutorial/lessons/10-clean-urls
[binrang@binrang 10-clean-urls]$ vi 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"
}
}
|
이 부분에서 start 부분을 아래와 같이 수정한다.
"start": "webpack-dev-server --inline --content-base . --history-api-fallback"
|
그 다음에 index.html을 아래와 같이 수정한다.
index.css 를 /index.css 로 bundle.js를 /bundle.js 로 변경하자.
[binrang@binrang 10-clean-urls]$ vi index.html
<!doctype html public="storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<!-- index.css -> /index.css -->
<link rel=stylesheet href="/index.css">
<div id=app></div>
<!-- bundle.js -> /bundle.js -->
<script src="/bundle.js"></script>
|
이제 웹을 다시 구동시켜 보자.
 |
| URL을 직접 입력해도 화면이 정상적으로 출력이 된다. |
이제 이 예제의 목표를 달성했다.
댓글 없음:
댓글 쓰기