How to use react-static - 10 common examples

const template = nodePath.resolve(page)
          // Make sure the path is relative to the location root
          let path = nodePath.relative(location, template)
          // Cutoff the extension
          path = nodePath.join(
            nodePath.dirname(path),
            nodePath.basename(path, nodePath.extname(path))
          )
          // Ensure paths are unix
          path = path.split(nodePath.sep).join(nodePath.posix.sep)
          // Make sure it starts with a slash
          path = path[0] === '/' ? path : `/${path}`
          // Turn `/index` paths into roots`
          path = path.replace(/\/index$/, '/')
          // Add the path prefix
          path = pathPrefix ? pathJoin(pathPrefix, path) : path
          // Return the route
          return createRoute({
            path,
            template,
            originalPath,
          })
        })
      )

Root: PreviousRoot => ({ children, ...rest }) => {
    const basepath = useBasepath()
    const staticInfo = useStaticInfo()

    const RouteHandler = props => (
      
        {children}
      
    )

    const renderedChildren = (
      // Place a top-level router inside the root
      // This will give proper context to Link and other reach components
      
        
      
    )

Root: PreviousRoot => ({ children }) => {
    let Router
    const basepath = useBasepath()
    const staticInfo = useStaticInfo()

    const routerProps = {
      basepath, // Required
    }

    // Test for document to detect the node stage
    if (typeof document !== 'undefined') {
      // If in the browser, just use the browser router
      Router = BrowserRouter
    } else {
      Router = StaticRouter
      routerProps.location = staticInfo.path // Required
      routerProps.context = {} // Required
    }
    return (

Root: PreviousRoot => ({ children, ...rest }) => {
    const basepath = useBasepath()
    const staticInfo = useStaticInfo()

    const RouteHandler = props => (
      
        {children}
      
    )

    const renderedChildren = (
      // Place a top-level router inside the root
      // This will give proper context to Link and other reach components
      
        
      
    )

    // If we're in SSR, use a manual server location

Root: PreviousRoot => ({ children }) => {
    let Router
    const basepath = useBasepath()
    const staticInfo = useStaticInfo()

    const routerProps = {
      basepath, // Required
    }

    // Test for document to detect the node stage
    if (typeof document !== 'undefined') {
      // If in the browser, just use the browser router
      Router = BrowserRouter
    } else {
      Router = StaticRouter
      routerProps.location = staticInfo.path // Required
      routerProps.context = {} // Required
    }
    return (

function menuToRoutes (items) {
  // Normalize the routes with react-static's normalizer. Make sure it still returns
  // a tree, so we can use it as the sidebar structure. This will also
  // give us routes with full paths at each nesting level we can use in the menu
  const normalizedRoutes = normalizeRoutes(items, {
    tree: true,
    force404: false,
    disableDuplicateRoutesWarning: true,
  })

  // Now we need to use the title, markdown and component info to set up the right
  // components and routeData
  const mapWithComponentsAndData = items =>
    items.map(({
      path, originalPath, component, markdownSrc, title, children = [], ...rest
    }) => ({
      ...rest,
      fullPath: path,
      title,
      path: originalPath,
      component:

render={props => {
      // Get the component for this path
      let Comp = getComponentForPath(getRoutePath(props.location.pathname))
      if (!Comp) {
        Comp = getComponentForPath('404')
      }

      // When we're rendering for static HTML, be sure to NOT animate in.
      if (routePath) {
        return (
          // This relative wrapper is necessary for accurate rehydration :)
          <div style="{{">
            
          </div>
        )
      }

      // Use React-Move to animate the different components coming in and out
      return (

export const RouterLink = ({ to, ...props }: RouterLinkProps & React.ComponentProps) => {
  const ref = usePrefetch(to);

  // tslint:disable-next-line no-any
  return ;
};

{
        let Comp = getComponentForPath(cleanPath(props.location.pathname))
        let is404 = props.location.pathname === '404'
        if (!Comp) {
          is404 = true
          Comp = getComponentForPath('404')
        }
        return Comp ?  : null
      }} />
    )

getRoutes: async () => {
    const { data: posts } = await axios.get(
      'https://jsonplaceholder.typicode.com/posts'
    )

    const allPosts = []

    const sidebarInfo = createSharedData({
      foo: 'bar',
    })

    let i = 0
    while (i < routeSize) {
      i++
      const post = posts[i % posts.length]
      allPosts.push({
        ...post,
        id: i,
        body: `${post.body} ${i}`,
      })
    }

    return [
      ...(!process.env.PAGINATION