Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4cb925d

Browse files
13 - npm - react-router
1 parent d31ecae commit 4cb925d

File tree

6 files changed

+161
-9
lines changed

6 files changed

+161
-9
lines changed

‎package-lock.json‎

Lines changed: 73 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
"react": "^16.4.1",
77
"react-dom": "^16.4.1",
88
"react-markdown": "^3.3.3",
9+
"react-router": "^4.3.1",
10+
"react-router-dom": "^4.3.1",
911
"react-youtube": "^7.6.0",
1012
"whatwg-fetch": "^2.0.4"
1113
},

‎src/App.js‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,39 @@
11
import React, { Component } from 'react'
2-
// import PostList from './posts/PostList'
32

4-
import ReactMarkdownExample from './thirdParty/ReactMarkdownExample'
3+
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom'
4+
5+
import DynamicRouteComp from './routingComps/DynamicRouteComp'
6+
import StaticRouteComp from './routingComps/StaticRouteComp'
7+
import NotFound from './routingComps/NotFound'
58

69
import './App.css'
710

811
class App extends Component {
912
render () {
10-
const input = '<h1>Hello Wolrd</h1>\n\n # [This](http://joincfe.com/youtube/) is a header\n\nAnd this is a paragraph http://joincfe.com/youtube/'
13+
const loggedIn = true
14+
const supportsHistory = 'pushState' in window.history
1115
return (
12-
<div className='App'>
13-
<ReactMarkdownExample input={input} />
16+
<div className='App' >
17+
<nav className='navbar navbar-light bg-light'>
18+
<a className='navbar-brand' href='/'>Navbar</a>
19+
</nav>
20+
<BrowserRouter forceRefresh={!supportsHistory}>
21+
<Switch>
22+
<Route exact path='/' component={StaticRouteComp} />
23+
<Route exact path='/about' component={StaticRouteComp} />
24+
<Route path='/posts/:slug' component={DynamicRouteComp} />
25+
<Route component={NotFound} />
26+
27+
<Route exact path='/user' render={() => (
28+
loggedIn === true ? (
29+
<Redirect to='/posts/hello-there/' />
30+
) : (
31+
<StaticRouteComp />
32+
)
33+
)} />
34+
35+
</Switch>
36+
</BrowserRouter>
1437
</div>
1538
)
1639
}

‎src/routingComps/DynamicRouteComp.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { Component } from 'react'
2+
3+
import { Link } from 'react-router-dom'
4+
5+
class DynamicRouteComp extends Component {
6+
componentDidMount () {
7+
const { slug } = this.props.match.params
8+
9+
// this.performLookup(slug) //grabing data from your api
10+
11+
// const { history } = this.props
12+
// const supportsHistory = 'pushState' in window.history
13+
// if (supportsHistory) {
14+
// history.pushState(null, '/not-found')
15+
// } else {
16+
// window.location = '/dashboard'
17+
// }
18+
}
19+
20+
render () {
21+
const { slug } = this.props.match.params
22+
return (
23+
<div>
24+
<h1>{slug} that changes based on route</h1>
25+
<Link className='some-link' to='/about/'>Static Page</Link>
26+
</div>
27+
)
28+
}
29+
}
30+
31+
export default DynamicRouteComp

‎src/routingComps/NotFound.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React, { Component } from 'react'
2+
3+
class NotFound extends Component {
4+
render () {
5+
return (
6+
<h1>404 error. Page Not Found</h1>
7+
)
8+
}
9+
}
10+
11+
export default NotFound

‎src/routingComps/StaticRouteComp.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { Component } from 'react'
2+
3+
import { Link } from 'react-router-dom'
4+
5+
class StaticRouteComp extends Component {
6+
render () {
7+
return (
8+
<div>
9+
<h1>Content that doesn't change based on route.</h1>
10+
<Link className='some-link' to='/posts/dynamic/'>Dynamic Page</Link>
11+
</div>
12+
)
13+
}
14+
}
15+
16+
export default StaticRouteComp

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /