Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support nested routes, and a base prop to start from if necessary #100

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
Open

support nested routes, and a base prop to start from if necessary #100

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
d43d920
support nested routes, and a base prop to start from if necessary
sskoopa Dec 11, 2016
c1931cb
update to use props.base instead of state.baseUrl
sskoopa Dec 12, 2016
257a761
move base to this.baseUrl
sskoopa Dec 12, 2016
a8fab3a
adding documentation for nested routes
sskoopa Dec 12, 2016
839775c
fix indentation of nested router doc example
sskoopa Dec 12, 2016
d7e5755
interim work on nested routers
sskoopa Dec 15, 2016
bf1dd22
fixup nested route tests in dom
sskoopa Dec 18, 2016
9e4a87b
test nested routers with all path/base combinations
sskoopa Dec 18, 2016
3f36e28
new Match component, handle var-based paths
sskoopa Dec 19, 2016
abb475e
attempted test for <Match/>
sskoopa Dec 19, 2016
218b127
move nested route testing to dom.js
sskoopa Dec 19, 2016
a6114af
Router and Match finally work
sskoopa Dec 19, 2016
5ac00bd
Router and Match finally work
sskoopa Dec 19, 2016
132b302
updated README example
sskoopa Dec 19, 2016
dcdd3f4
added ability to reset base. Defining base will not prepend context …
sskoopa Dec 19, 2016
07f14d7
merged 2.4.1 changes
sskoopa Mar 4, 2017
6b2332f
Merge from 2.5.1
sskoopa Apr 18, 2017
a26343a
final merge of both Match components, nested routers work post 2.5.1
sskoopa Apr 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,22 @@ You can even mix-and-match URL parameters and normal `props`.
</Router>
```

### Nesting routers

Routers will append the parent Routers' URLs together to come up with the matching route for children.

```js
<Router>
<A path="/" /> //will route '/'
<Router path="/app/:bar*"> //will route '/app/*' (could also use default here)
<B path="/b"/> //will route '/app/b'
<C path="/c" /> //will route '/app/c'
</Router>
<D path="/d" /> //will route '/d'
<E default /> //will route anything not listed above
</Router>
```

### Lazy Loading

Lazy loading (code splitting) with `preact-router` can be implemented easily using the [AsyncRoute](https://www.npmjs.com/package/preact-async-route) module:
Expand Down
23 changes: 20 additions & 3 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { cloneElement, h, Component } from 'preact';
import { exec, pathRankSort, assign } from './util';
import { exec, pathRankSort, assign, segmentize, CONTEXT_KEY } from './util';

let customHistory = null;

Expand Down Expand Up @@ -146,11 +146,23 @@ function initEventListeners() {


class Router extends Component {
constructor(props) {
constructor(props, context) {
super(props);
this.baseUrl = this.props.base || '';
if (props.path) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we need to move this into the if block on L156?

let segments = segmentize(props.path);
segments.forEach(segment => {
if (segment.indexOf(':') == -1) {
this.baseUrl = this.baseUrl + '/' + segment;
}
});
}
if (props.history) {
customHistory = props.history;
}
if (context && context[CONTEXT_KEY] && !this.props.base) {
this.baseUrl = context[CONTEXT_KEY] + this.baseUrl;
}

this.state = {
url: props.url || getCurrentUrl()
Expand All @@ -159,6 +171,11 @@ class Router extends Component {
initEventListeners();
}

getChildContext() {
let result = {[CONTEXT_KEY]: this.baseUrl};
return result;
}

shouldComponentUpdate(props) {
if (props.static!==true) return true;
return props.url!==this.props.url || props.onChange!==this.props.onChange;
Expand Down Expand Up @@ -211,7 +228,7 @@ class Router extends Component {
getMatchingChildren(children, url, invoke) {
return children.slice().sort(pathRankSort).map( vnode => {
let attrs = vnode.attributes || {},
path = attrs.path,
path = this.baseUrl + attrs.path,
matches = exec(url, path, attrs);
if (matches) {
if (invoke!==false) {
Expand Down
21 changes: 21 additions & 0 deletions src/match.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
import { h, Component } from 'preact';
import { subscribers, getCurrentUrl, Link as StaticLink } from 'preact-router';
import { segmentize, CONTEXT_KEY } from './util';

export class Match extends Component {
constructor(props, context) {
super(props);
this.baseUrl = this.props.base || '';
if (props.path) {
let segments = segmentize(props.path);
segments.forEach(segment => {
if (segment.indexOf(':') == -1) {
this.baseUrl = this.baseUrl + '/' + segment;
}
});
}
if (context && context[CONTEXT_KEY]) {
this.baseUrl = context[CONTEXT_KEY] + this.baseUrl;
}
}
update = url => {
this.nextUrl = url;
this.setState({});
Expand All @@ -12,10 +28,15 @@ export class Match extends Component {
componentWillUnmount() {
subscribers.splice(subscribers.indexOf(this.update)>>>0, 1);
}
getChildContext() {
let result = {[CONTEXT_KEY]: this.baseUrl};
return result;
}
render(props) {
let url = this.nextUrl || getCurrentUrl(),
path = url.replace(/\?.+$/,'');
this.nextUrl = null;
console.log('children', props.children);
return props.children[0] && props.children[0]({
url,
path,
Expand Down
2 changes: 2 additions & 0 deletions src/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@

//a key for the context to carry baseUrl to nested Router instances
export const CONTEXT_KEY = 'preact-router-base';
const EMPTY = {};

export function assign(obj, props) {
Expand Down
189 changes: 189 additions & 0 deletions test/dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,195 @@ describe('dom', () => {
expect(A.prototype.componentWillUnmount).to.have.been.calledOnce;
});

it('should support nested routers with default', () => {
class X {
componentWillMount() {}
componentWillUnmount() {}
render(){ return <div />; }
}
sinon.spy(X.prototype, 'componentWillMount');
sinon.spy(X.prototype, 'componentWillUnmount');
class Y {
componentWillMount() {}
componentWillUnmount() {}
render(){ return <div />; }
}
sinon.spy(Y.prototype, 'componentWillMount');
sinon.spy(Y.prototype, 'componentWillUnmount');
mount(
<Router base="/app">
<X path="/x" />
<Router default>
<Y path="/y"/>
</Router>
</Router>
);
expect(X.prototype.componentWillMount).not.to.have.been.called;
expect(Y.prototype.componentWillMount).not.to.have.been.called;
route('/app/x');
expect(X.prototype.componentWillMount).to.have.been.calledOnce;
expect(X.prototype.componentWillUnmount).not.to.have.been.called;
expect(Y.prototype.componentWillMount).not.to.have.been.called;
expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
route('/app/y');
expect(X.prototype.componentWillMount).to.have.been.calledOnce;
expect(X.prototype.componentWillUnmount).to.have.been.calledOnce;
expect(Y.prototype.componentWillMount).to.have.been.calledOnce;
expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
});

it('should support nested routers with path', () => {
class X {
componentWillMount() {}
componentWillUnmount() {}
render(){ return <div />; }
}
sinon.spy(X.prototype, 'componentWillMount');
sinon.spy(X.prototype, 'componentWillUnmount');
class Y {
componentWillMount() {}
componentWillUnmount() {}
render(){ return <div />; }
}
sinon.spy(Y.prototype, 'componentWillMount');
sinon.spy(Y.prototype, 'componentWillUnmount');
mount(
<Router base='/baz'>
<X path="/j" />
<Router path="/box/:bar*">
<Y path="/k"/>
</Router>
</Router>
);
expect(X.prototype.componentWillMount).not.to.have.been.called;
expect(Y.prototype.componentWillMount).not.to.have.been.called;
route('/baz/j');
expect(X.prototype.componentWillMount).to.have.been.calledOnce;
expect(X.prototype.componentWillUnmount).not.to.have.been.called;
expect(Y.prototype.componentWillMount).not.to.have.been.called;
expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
route('/baz/box/k');
expect(X.prototype.componentWillMount).to.have.been.calledOnce;
expect(X.prototype.componentWillUnmount).to.have.been.calledOnce;
expect(Y.prototype.componentWillMount).to.have.been.calledOnce;
expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
});

it('should support deeply nested routers', () => {
class X {
componentWillMount() {}
componentWillUnmount() {}
render(){ return <div />; }
}
sinon.spy(X.prototype, 'componentWillMount');
sinon.spy(X.prototype, 'componentWillUnmount');
class Y {
componentWillMount() {}
componentWillUnmount() {}
render(){ return <div />; }
}
sinon.spy(Y.prototype, 'componentWillMount');
sinon.spy(Y.prototype, 'componentWillUnmount');
mount(
<Router base='/baz'>
<X path="/j" />
<z path="/box/:bar*">
<Router path="/box">
<Y path="/k"/>
</Router>
</z>
</Router>
);
expect(X.prototype.componentWillMount).not.to.have.been.called;
expect(Y.prototype.componentWillMount).not.to.have.been.called;
route('/baz/j');
expect(X.prototype.componentWillMount).to.have.been.calledOnce;
expect(X.prototype.componentWillUnmount).not.to.have.been.called;
expect(Y.prototype.componentWillMount).not.to.have.been.called;
expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
route('/baz/box/k');
expect(X.prototype.componentWillMount).to.have.been.calledOnce;
expect(X.prototype.componentWillUnmount).to.have.been.calledOnce;
expect(Y.prototype.componentWillMount).to.have.been.calledOnce;
expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
});

it('should support nested routers with Match', () => {
class X {
componentWillMount() {}
componentWillUnmount() {}
render(){ return <div />; }
}
sinon.spy(X.prototype, 'componentWillMount');
sinon.spy(X.prototype, 'componentWillUnmount');
class Y {
componentWillMount() {}
componentWillUnmount() {}
render(){ return <div />; }
}
sinon.spy(Y.prototype, 'componentWillMount');
sinon.spy(Y.prototype, 'componentWillUnmount');
mount(
<Router base='/ccc'>
<X path="/jjj" />
<Match path="/xxx/:bar*">
<Router>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While the other nested router tests pass, the Match here cannot render the child as it is a vNode.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm. yeah we might need to do type detection in Match. I realize now we sortof have two matches, so it might be good to merge them. Need to think on this for sure, because I like the options your Match gives us.

<Y path="/kkk"/>
</Router>
</Match>
</Router>
);
expect(X.prototype.componentWillMount).not.to.have.been.called;
expect(Y.prototype.componentWillMount).not.to.have.been.called;
route('/ccc/jjj');
expect(X.prototype.componentWillMount).to.have.been.calledOnce;
expect(X.prototype.componentWillUnmount).not.to.have.been.called;
expect(Y.prototype.componentWillMount).not.to.have.been.called;
expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
route('/ccc/xxx/kkk');
expect(X.prototype.componentWillMount).to.have.been.calledOnce;
expect(X.prototype.componentWillUnmount).to.have.been.calledOnce;
expect(Y.prototype.componentWillMount).to.have.been.calledOnce;
expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
});

it('should support nested router reset via base attr', () => {
class X {
componentWillMount() {}
componentWillUnmount() {}
render(){ return <div />; }
}
sinon.spy(X.prototype, 'componentWillMount');
sinon.spy(X.prototype, 'componentWillUnmount');
class Y {
componentWillMount() {}
componentWillUnmount() {}
render(){ return <div />; }
}
sinon.spy(Y.prototype, 'componentWillMount');
sinon.spy(Y.prototype, 'componentWillUnmount');
mount(
<Router base='/baz'>
<X path="/j" />
<Router path="/:bar*" base="/baz/foo">
<Y path="/k"/>
</Router>
</Router>
);
expect(X.prototype.componentWillMount).not.to.have.been.called;
expect(Y.prototype.componentWillMount).not.to.have.been.called;
route('/baz/j');
expect(X.prototype.componentWillMount).to.have.been.calledOnce;
expect(X.prototype.componentWillUnmount).not.to.have.been.called;
expect(Y.prototype.componentWillMount).not.to.have.been.called;
expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
route('/baz/foo/k');
expect(X.prototype.componentWillMount).to.have.been.calledOnce;
expect(X.prototype.componentWillUnmount).to.have.been.calledOnce;
expect(Y.prototype.componentWillMount).to.have.been.calledOnce;
expect(Y.prototype.componentWillUnmount).not.to.have.been.called;
});

it('should support re-routing', done => {
class A {
componentWillMount() {
Expand Down