Update page title on route change

Test Plan:
Navigate to `/`, then click the “Explorer” link, and note that the page
title has updated.

wchargin-branch: update-page-title
This commit is contained in:
William Chargin 2018-07-20 19:09:35 -07:00
parent 256582d8b3
commit 08e8494170
2 changed files with 28 additions and 2 deletions

View File

@ -3,10 +3,20 @@
import React from "react";
import {Router, browserHistory} from "react-router";
import {createRoutes} from "./routes";
import {createRoutes, resolveTitleFromPath} from "./routes";
export default class App extends React.Component<{}> {
render() {
return <Router history={browserHistory} routes={createRoutes()} />;
return (
<Router
history={browserHistory}
routes={createRoutes()}
onUpdate={function() {
const router = this;
const path: string = router.state.location.pathname;
document.title = resolveTitleFromPath(path);
}}
/>
);
}
}

View File

@ -40,3 +40,19 @@ export function createRoutes() {
</Route>
);
}
function resolveRouteFromPath(path: string): ?RouteDatum {
const matches = (candidateRoute) => {
const candidatePath = candidateRoute.path;
const start = path.substring(0, candidatePath.length);
const end = path.substring(candidatePath.length);
return start === candidatePath && (end.length === 0 || end === "/");
};
return routeData.filter(matches)[0] || null;
}
export function resolveTitleFromPath(path: string): string {
const route = resolveRouteFromPath(path);
const fallback = "SourceCred";
return route ? route.title : fallback;
}