Add react router

This commit is contained in:
Grégoire Delattre 2016-11-12 19:45:26 +01:00
parent b20400b30f
commit f69e0a248c
4 changed files with 58 additions and 9 deletions

View File

@ -15,7 +15,8 @@
"font-awesome": "^4.7.0",
"jquery": "^2.2.4",
"react": "^15.3.2",
"react-dom": "^15.3.2"
"react-dom": "^15.3.2",
"react-router": "^3.0.0"
},
"devDependencies": {
"axios": "^0.15.2",

View File

@ -2,6 +2,7 @@ import React from 'react'
import ReactDOM from 'react-dom'
import NavBar from './navbar.jsx'
import MovieList from './movie-list.jsx'
import { Router, Route, IndexRoute, Link, hashHistory } from 'react-router'
class App extends React.Component {
render() {
@ -12,7 +13,7 @@ class App extends React.Component {
</div>
<div className="container-fluid">
<div className="container">
<MovieList />
{this.props.children}
</div>
</div>
</div>
@ -20,7 +21,11 @@ class App extends React.Component {
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={MovieList} />
<Route path="/movies/popular" component={MovieList} />
</Route>
</Router>
),document.getElementById('app'));

View File

@ -1,4 +1,5 @@
import React from 'react'
import { Link } from 'react-router'
export default class NavBar extends React.Component {
render() {
@ -14,7 +15,9 @@ export default class NavBar extends React.Component {
<a className="navbar-brand" href="#">Canape</a>
</div>
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul className="nav navbar-nav"></ul>
<ul className="nav navbar-nav">
<li><Link to="/movies/popular">Movies</Link></li>
</ul>
</div>
</div>
);

View File

@ -1564,10 +1564,23 @@ hawk@~3.1.3:
hoek "2.x.x"
sntp "1.x.x"
history@^3.0.0:
version "3.2.1"
resolved "https://registry.yarnpkg.com/history/-/history-3.2.1.tgz#71c7497f4e6090363d19a6713bb52a1bfcdd99aa"
dependencies:
invariant "^2.2.1"
loose-envify "^1.2.0"
query-string "^4.2.2"
warning "^3.0.0"
hoek@2.x.x:
version "2.16.3"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
hoist-non-react-statics@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
home-or-tmp@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@ -1659,7 +1672,7 @@ interpret@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
invariant@^2.2.0:
invariant@^2.2.0, invariant@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.1.tgz#b097010547668c7e337028ebe816ebe36c8a8d54"
dependencies:
@ -2084,7 +2097,7 @@ longest@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
loose-envify@^1.0.0, loose-envify@^1.1.0:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.0.tgz#6b26248c42f6d4fa4b0d8542f78edfcde35642a8"
dependencies:
@ -2509,6 +2522,13 @@ qs@~6.3.0:
version "6.3.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
query-string@^4.2.2:
version "4.2.3"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.2.3.tgz#9f27273d207a25a8ee4c7b8c74dcd45d556db822"
dependencies:
object-assign "^4.1.0"
strict-uri-encode "^1.0.0"
querystring-es3@~0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@ -2537,6 +2557,16 @@ react-dom@^15.3.2:
version "15.3.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
react-router:
version "3.0.0"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.0.0.tgz#3f313e4dbaf57048c48dd0a8c3cac24d93667dff"
dependencies:
history "^3.0.0"
hoist-non-react-statics "^1.2.0"
invariant "^2.2.1"
loose-envify "^1.2.0"
warning "^3.0.0"
react@^15.3.2:
version "15.3.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e"
@ -2844,6 +2874,10 @@ stream-consume@^0.1.0, stream-consume@~0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/stream-consume/-/stream-consume-0.1.0.tgz#a41ead1a6d6081ceb79f65b061901b6d8f3d1d0f"
strict-uri-encode@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
string_decoder@~0.10.25, string_decoder@~0.10.x:
version "0.10.31"
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
@ -3101,6 +3135,12 @@ vm-browserify@0.0.4:
dependencies:
indexof "0.0.1"
warning@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
dependencies:
loose-envify "^1.0.0"
watchpack@^0.2.1:
version "0.2.9"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"