Commit fa6f2d72 authored by jnsone11's avatar jnsone11
Browse files

wip

parent 06d2761f
...@@ -2832,6 +2832,18 @@ ...@@ -2832,6 +2832,18 @@
"minimalistic-assert": "1.0.0" "minimalistic-assert": "1.0.0"
} }
}, },
"history": {
"version": "4.7.2",
"resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
"integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
"requires": {
"invariant": "2.2.2",
"loose-envify": "1.3.1",
"resolve-pathname": "2.2.0",
"value-equal": "0.4.0",
"warning": "3.0.0"
}
},
"hmac-drbg": { "hmac-drbg": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
...@@ -2843,6 +2855,11 @@ ...@@ -2843,6 +2855,11 @@
"minimalistic-crypto-utils": "1.0.1" "minimalistic-crypto-utils": "1.0.1"
} }
}, },
"hoist-non-react-statics": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz",
"integrity": "sha1-ND24TGAYxlB3iJgkATWhQg7iLOA="
},
"hosted-git-info": { "hosted-git-info": {
"version": "2.5.0", "version": "2.5.0",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.5.0.tgz", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.5.0.tgz",
...@@ -2934,6 +2951,14 @@ ...@@ -2934,6 +2951,14 @@
"integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=", "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=",
"dev": true "dev": true
}, },
"invariant": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
"integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=",
"requires": {
"loose-envify": "1.3.1"
}
},
"invert-kv": { "invert-kv": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz", "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
...@@ -4280,6 +4305,48 @@ ...@@ -4280,6 +4305,48 @@
"lodash": "4.17.4" "lodash": "4.17.4"
} }
}, },
"react-router": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz",
"integrity": "sha512-DY6pjwRhdARE4TDw7XjxjZsbx9lKmIcyZoZ+SDO7SBJ1KUeWNxT22Kara2AC7u6/c2SYEHlEDLnzBCcNhLE8Vg==",
"requires": {
"history": "4.7.2",
"hoist-non-react-statics": "2.3.1",
"invariant": "2.2.2",
"loose-envify": "1.3.1",
"path-to-regexp": "1.7.0",
"prop-types": "15.6.0",
"warning": "3.0.0"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
},
"path-to-regexp": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
"requires": {
"isarray": "0.0.1"
}
}
}
},
"react-router-dom": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz",
"integrity": "sha512-cHMFC1ZoLDfEaMFoKTjN7fry/oczMgRt5BKfMAkTu5zEuJvUiPp1J8d0eXSVTnBh6pxlbdqDhozunOOLtmKfPA==",
"requires": {
"history": "4.7.2",
"invariant": "2.2.2",
"loose-envify": "1.3.1",
"prop-types": "15.6.0",
"react-router": "4.2.0",
"warning": "3.0.0"
}
},
"read-pkg": { "read-pkg": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
...@@ -4388,6 +4455,11 @@ ...@@ -4388,6 +4455,11 @@
"integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=", "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
"dev": true "dev": true
}, },
"resolve-pathname": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
"integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
},
"resolve-url": { "resolve-url": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
...@@ -5505,6 +5577,11 @@ ...@@ -5505,6 +5577,11 @@
"spdx-expression-parse": "1.0.4" "spdx-expression-parse": "1.0.4"
} }
}, },
"value-equal": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
"integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
},
"vary": { "vary": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
...@@ -5519,6 +5596,14 @@ ...@@ -5519,6 +5596,14 @@
"indexof": "0.0.1" "indexof": "0.0.1"
} }
}, },
"warning": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
"integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
"requires": {
"loose-envify": "1.3.1"
}
},
"watchpack": { "watchpack": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.4.0.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.4.0.tgz",
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"express": "^4.16.2", "express": "^4.16.2",
"react": "^16.2.0", "react": "^16.2.0",
"react-dom": "^16.2.0", "react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"typescript": "^2.7.1" "typescript": "^2.7.1"
}, },
"devDependencies": { "devDependencies": {
......
import * as React from 'react' import * as React from 'react'
import {hydrate} from 'react-dom' import {hydrate} from 'react-dom'
import Hello from './components/Hello' import RootRoutes from './components/RootRoutes'
const reactRoot = document.getElementById('react-root'); const reactRoot = document.getElementById('react-root');
...@@ -11,7 +11,7 @@ const render = (Routings: React.ComponentClass) => { ...@@ -11,7 +11,7 @@ const render = (Routings: React.ComponentClass) => {
) )
}; };
hydrate(render(Hello),reactRoot); hydrate(render(RootRoutes),reactRoot);
declare let module: { declare let module: {
hot: { hot: {
...@@ -19,8 +19,8 @@ declare let module: { ...@@ -19,8 +19,8 @@ declare let module: {
} }
} }
module.hot.accept('./components/Hello', () => { module.hot.accept('./components/RootRoutes', () => {
import('./components/Hello').then((module: any) => { import('./components/RootRoutes').then((module: any) => {
hydrate(render(module.default), reactRoot); hydrate(render(module.default), reactRoot);
}) })
}) })
\ No newline at end of file
import * as React from 'react'
import {Component} from 'react'
import {RouteComponentProps} from 'react-router-dom'
interface Props {
}
class ComponentWithId extends Component<RouteComponentProps<Props>> {
render(){
console.log('withProps',this.props);
return <div>Hello</div>
}
}
export default ComponentWithId;
import * as React from 'react'
import {Component} from 'react'
class FunComponent extends Component {
render(){
return <div>Routing is Fun</div>
}
}
export default FunComponent;
...@@ -3,7 +3,7 @@ import {Component} from 'react' ...@@ -3,7 +3,7 @@ import {Component} from 'react'
class HelloComponent extends Component { class HelloComponent extends Component {
render(){ render(){
return <div>Hello!!</div> return <div>Hello</div>
} }
} }
......
import * as React from 'react'
import {Component} from 'react'
import {BrowserRouter, Route, Link} from 'react-router-dom'
import HelloComponent from './Hello'
import FunComponent from './Fun'
import ComponentWithId from './ComponentWithId'
class RootRoutes extends Component {
render() {
return <div>
<BrowserRouter>
<div>
<Link to="/">Go to Main</Link>
<br/><br/>
<Link to="/fun">Go to fun</Link>
<br/><br/>
<Link to="/withState">Go to withState</Link>
<br/><br/>
<Route exact path="/" component={HelloComponent}/>
<Route exact path="/fun" component={FunComponent}/>
<Route exact path="/withState" component={ComponentWithId}/>
<Route exact path="/withState/:id" component={ComponentWithId}/>
</div>
</BrowserRouter>
</div>
}
}
export default RootRoutes;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment