mirror of
https://github.com/c8r/x0.git
synced 2024-08-16 17:00:24 +03:00
[WIP] Switch to @reach/router
- adds more accessible route transitions - decreases bundle size - supports relative links
This commit is contained in:
parent
f265623925
commit
f90d8cd669
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link } from '@reach/router'
|
||||
|
||||
export default props => (
|
||||
<div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link } from '@reach/router'
|
||||
|
||||
export default class extends React.Component {
|
||||
static getInitialProps = async () => {
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import * as scope from 'rebass'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link } from '@reach/router'
|
||||
import { ScopeProvider, SidebarLayout } from '../components'
|
||||
import {
|
||||
Provider as RebassProvider,
|
||||
|
@ -7,7 +7,7 @@ import {
|
||||
Caps,
|
||||
BlockLink,
|
||||
} from 'rebass'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link } from '@reach/router'
|
||||
import { Logo } from '@compositor/logo'
|
||||
|
||||
export default ({ children }) =>
|
||||
|
@ -11,7 +11,7 @@ This file can be used for custom layouts, including headers, footers, and naviga
|
||||
```jsx
|
||||
// _app.js
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link } from '@reach/router'
|
||||
import {
|
||||
Container,
|
||||
Toolbar,
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link } from '@reach/router'
|
||||
import styled from 'styled-components'
|
||||
import {
|
||||
Container,
|
||||
|
@ -6,7 +6,7 @@ const { generateJSReferences } = require('mini-html-webpack-plugin')
|
||||
const merge = require('webpack-merge')
|
||||
const React = require('react')
|
||||
const { renderToString, renderToStaticMarkup } = require('react-dom/server')
|
||||
const { StaticRouter } = require('react-router-dom')
|
||||
const { ServerLocation } = require('@reach/router')
|
||||
const semver = require('semver')
|
||||
const rimraf = require('rimraf')
|
||||
const util = require('util')
|
||||
|
@ -32,6 +32,7 @@
|
||||
"@mdx-js/loader": "^0.11.0",
|
||||
"@mdx-js/mdx": "^0.10.1",
|
||||
"@mdx-js/tag": "^0.11.0",
|
||||
"@reach/router": "^1.1.1",
|
||||
"@rebass/markdown": "^1.0.0-1",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-loader": "^7.1.4",
|
||||
@ -63,8 +64,6 @@
|
||||
"react-dev-utils": "^5.0.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-live": "^1.10.1",
|
||||
"react-router": "^4.3.1",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-scope-provider": "^1.0.0-1",
|
||||
"read-pkg-up": "^3.0.0",
|
||||
"rebass": "^2.0.0-6",
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link } from '@reach/router'
|
||||
|
||||
export default ({ routes = [] }) => (
|
||||
<React.Fragment>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link } from '@reach/router'
|
||||
import styled from 'styled-components'
|
||||
import {
|
||||
style,
|
||||
|
@ -1,10 +1,17 @@
|
||||
import React from 'react'
|
||||
import { withRouter } from 'react-router-dom'
|
||||
import { Location } from '@reach/Router'
|
||||
|
||||
export default withRouter(class extends React.Component {
|
||||
const withLocation = Comp => props => (
|
||||
<Location>
|
||||
{({ location }) => <Comp location={location} {...props} />}
|
||||
</Location>
|
||||
)
|
||||
|
||||
export default withLocation(class extends React.Component {
|
||||
componentDidUpdate (prev) {
|
||||
const { pathname, hash } = this.props.location
|
||||
if (prev.location.pathname !== pathname) {
|
||||
const { hash } = this.props.location
|
||||
|
||||
if (prev.location !== this.props.location) {
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
|
@ -1,9 +1,6 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {
|
||||
Link as RouterLink,
|
||||
NavLink as RouterNavLink
|
||||
} from 'react-router-dom'
|
||||
import { Link as RouterLink } from '@reach/router'
|
||||
import styled from 'styled-components'
|
||||
import {
|
||||
Provider as RebassProvider,
|
||||
@ -23,6 +20,28 @@ import {
|
||||
} from 'rebass'
|
||||
import { borderColor, themeGet } from 'styled-system'
|
||||
|
||||
// const RouterNavLink = RouterLink
|
||||
const RouterNavLink = ({
|
||||
activeClassName="active",
|
||||
activeStyle,
|
||||
style,
|
||||
className,
|
||||
exact,
|
||||
...props
|
||||
}) => (
|
||||
<RouterLink getProps={({ isCurrent, isPartiallyCurrent }) => {
|
||||
const isActive = (exact && isCurrent) || isPartiallyCurrent
|
||||
if (isActive) {
|
||||
return {
|
||||
className: [ className, activeClassName ].join(' '),
|
||||
style: { ...style, ...activeStyle }
|
||||
}
|
||||
} else {
|
||||
return { className, style }
|
||||
}
|
||||
}} {...props}/>
|
||||
)
|
||||
|
||||
const breakpoint = `@media screen and (min-width: 48em)`
|
||||
|
||||
export const Root = styled(Flex)([], {
|
||||
|
42
src/entry.js
42
src/entry.js
@ -3,13 +3,11 @@ import path from 'path'
|
||||
import React from 'react'
|
||||
import { render, hydrate } from 'react-dom'
|
||||
import {
|
||||
StaticRouter,
|
||||
BrowserRouter,
|
||||
Switch,
|
||||
Route,
|
||||
ServerLocation,
|
||||
Router,
|
||||
Link,
|
||||
withRouter
|
||||
} from 'react-router-dom'
|
||||
Location
|
||||
} from '@reach/router'
|
||||
import { Provider as RebassProvider } from 'rebass'
|
||||
import minimatch from 'minimatch'
|
||||
import sortBy from 'lodash.sortby'
|
||||
@ -41,7 +39,7 @@ const initialComponents = getComponents(req)
|
||||
|
||||
const DefaultApp = props => props.children
|
||||
|
||||
const Router = IS_CLIENT ? BrowserRouter : StaticRouter
|
||||
const Wrapper = IS_CLIENT ? React.Fragment : ServerLocation
|
||||
const appPath = req.keys().find(key => key === './_app.js')
|
||||
const App = appPath ? (req(appPath).default || req(appPath)) : DefaultApp
|
||||
|
||||
@ -96,11 +94,17 @@ export const getRoutes = async (components = initialComponents) => {
|
||||
return sorted
|
||||
}
|
||||
|
||||
const RouterState = withRouter(({ render, ...props }) => {
|
||||
const { pathname } = props.location
|
||||
const route = props.routes.find(r => r.path === pathname || r.href === pathname) || { props: {} }
|
||||
return render({ ...props, route })
|
||||
})
|
||||
const RouterState = ({ render, routes }) => (
|
||||
<Location>
|
||||
{(props) => {
|
||||
const { pathname } = props.location
|
||||
const route = routes.find(r => r.path === pathname || r.href === pathname) || { props: {} }
|
||||
return render({ ...props, route })
|
||||
}}
|
||||
</Location>
|
||||
)
|
||||
|
||||
const Route = ({ render, ...props }) => render(props)
|
||||
|
||||
export default class Root extends React.Component {
|
||||
static defaultProps = {
|
||||
@ -124,10 +128,10 @@ export default class Root extends React.Component {
|
||||
: FileList
|
||||
|
||||
const render = appProps => (
|
||||
<Switch>
|
||||
<Router basepath={basename}>
|
||||
{routes.map(({ Component, ...route }) => (
|
||||
<Route
|
||||
{...route}
|
||||
path={route.path}
|
||||
render={props => (
|
||||
<Catch>
|
||||
<CenteredLayout
|
||||
@ -143,16 +147,14 @@ export default class Root extends React.Component {
|
||||
/>
|
||||
))}
|
||||
<Route
|
||||
default
|
||||
render={props => <NotFound {...props} routes={routes} />}
|
||||
/>
|
||||
</Switch>
|
||||
</Router>
|
||||
)
|
||||
|
||||
return (
|
||||
<Router
|
||||
context={{}}
|
||||
basename={basename}
|
||||
location={path}>
|
||||
<Wrapper url={path}>
|
||||
<React.Fragment>
|
||||
<RebassProvider>
|
||||
<ScopeProvider>
|
||||
@ -174,7 +176,7 @@ export default class Root extends React.Component {
|
||||
</RebassProvider>
|
||||
{!disableScroll && <ScrollTop />}
|
||||
</React.Fragment>
|
||||
</Router>
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
export { Link, NavLink } from 'react-router-dom'
|
||||
export { Link } from '@reach/router'
|
||||
export { Link as NavLink } from '@reach/router'
|
||||
export { default as Catch } from './Catch'
|
||||
export { default as CenteredLayout } from './CenteredLayout'
|
||||
export { default as FileList } from './FileList'
|
||||
|
11
src/scope.js
11
src/scope.js
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { withRouter, Link } from 'react-router-dom'
|
||||
import { Location, Link } from '@reach/router'
|
||||
import rebassMarkdown from '@rebass/markdown'
|
||||
import { Pre } from 'rebass'
|
||||
import { MDXTag } from '@mdx-js/tag'
|
||||
@ -11,9 +11,14 @@ const cleanHREF = href => href
|
||||
.replace(/\.mdx?$/, '')
|
||||
.replace(/\.jsx?$/, '')
|
||||
|
||||
export const link = withRouter(({
|
||||
const withLocation = (Comp) => props => (
|
||||
<Location>
|
||||
{({ location }) => <Comp location={location} {...props} />}
|
||||
</Location>
|
||||
)
|
||||
|
||||
export const link = withLocation(({
|
||||
href = '',
|
||||
match,
|
||||
location,
|
||||
children,
|
||||
className,
|
||||
|
Loading…
Reference in New Issue
Block a user