-
Notifications
You must be signed in to change notification settings - Fork 26.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Support
events
emitter for router (#4726)
Fixes #4679 * Document usage of `events` router property * Expose `events` in the `router` context object
- Loading branch information
1 parent
a1f5f35
commit 498f37e
Showing
9 changed files
with
184 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import * as React from 'react' | ||
import { withRouter } from 'next/router' | ||
import Link from 'next/link' | ||
|
||
const pages = { | ||
'/a': 'Foo', | ||
'/b': 'Bar' | ||
} | ||
|
||
class HeaderNav extends React.Component { | ||
constructor ({ router }) { | ||
super() | ||
|
||
this.state = { | ||
activeURL: router.asPath | ||
} | ||
|
||
this.handleRouteChange = this.handleRouteChange.bind(this) | ||
} | ||
|
||
componentDidMount () { | ||
this.props.router.events.on('routeChangeComplete', this.handleRouteChange) | ||
} | ||
|
||
componentWillUnmount () { | ||
this.props.router.events.off('routeChangeComplete', this.handleRouteChange) | ||
} | ||
|
||
handleRouteChange (url) { | ||
this.setState({ | ||
activeURL: url | ||
}) | ||
} | ||
|
||
render () { | ||
return ( | ||
<nav> | ||
{ | ||
Object.keys(pages).map(url => ( | ||
<Link href={url} key={url} prefetch> | ||
<a className={this.state.activeURL === url ? 'active' : ''}> | ||
{ pages[url] } | ||
</a> | ||
</Link> | ||
)) | ||
} | ||
</nav> | ||
) | ||
} | ||
} | ||
|
||
export default withRouter(HeaderNav) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import App, { Container } from 'next/app' | ||
import React from 'react' | ||
import HeaderNav from '../components/header-nav' | ||
|
||
export default class MyApp extends App { | ||
static async getInitialProps ({ Component, router, ctx }) { | ||
let pageProps = {} | ||
|
||
if (Component.getInitialProps) { | ||
pageProps = await Component.getInitialProps(ctx) | ||
} | ||
|
||
return {pageProps} | ||
} | ||
|
||
render () { | ||
const { Component, pageProps } = this.props | ||
return ( | ||
<Container> | ||
<HeaderNav /> | ||
<Component {...pageProps} /> | ||
</Container> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import * as React from 'react' | ||
import { withRouter } from 'next/router' | ||
|
||
class PageA extends React.Component { | ||
goToB () { | ||
this.props.router.push('/b') | ||
} | ||
|
||
render () { | ||
return ( | ||
<div id='page-a'> | ||
<button onClick={() => this.goToB()}>Go to B</button> | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
export default withRouter(PageA) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import * as React from 'react' | ||
|
||
class PageB extends React.Component { | ||
render () { | ||
return ( | ||
<div id='page-b'> | ||
<p>Page B!</p> | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
export default PageB |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
/* global jasmine, describe, it, expect, beforeAll, afterAll */ | ||
|
||
import { join } from 'path' | ||
import { | ||
nextServer, | ||
nextBuild, | ||
startApp, | ||
stopApp | ||
} from 'next-test-utils' | ||
import webdriver from 'next-webdriver' | ||
|
||
describe('withRouter', () => { | ||
const appDir = join(__dirname, '../') | ||
let appPort | ||
let server | ||
let app | ||
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5 | ||
|
||
beforeAll(async () => { | ||
await nextBuild(appDir) | ||
app = nextServer({ | ||
dir: join(__dirname, '../'), | ||
dev: false, | ||
quiet: true | ||
}) | ||
|
||
server = await startApp(app) | ||
appPort = server.address().port | ||
}) | ||
|
||
afterAll(() => stopApp(server)) | ||
|
||
it('allows observation of navigation events', async () => { | ||
const browser = await webdriver(appPort, '/a') | ||
await browser.waitForElementByCss('#page-a') | ||
|
||
let activePage = await browser.elementByCss('.active').text() | ||
expect(activePage).toBe('Foo') | ||
|
||
await browser.elementByCss('button').click() | ||
await browser.waitForElementByCss('#page-b') | ||
|
||
activePage = await browser.elementByCss('.active').text() | ||
expect(activePage).toBe('Bar') | ||
|
||
browser.close() | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters