Gatsby 声明式路由答案

【问题标题】：Gatsby Declarative RoutingGatsby 声明式路由
【发布时间】：2020-01-02 03:55:28
【问题描述】：

你好。目前我正在尝试将创建反应应用程序移至 Gatsby。在 CRA，我以这种方式声明了我的路线。

routes.js

    /* eslint-disable react/no-multi-comp */
/* eslint-disable react/display-name */
import React, { lazy } from 'react'
import { Redirect } from '@reach/router'

import MainLayout from './layouts/MainLayout'
import LandingPage from './containers/LandingPage'

const routes = [
  {
    route: '*',
    component: MainLayout,
    routes: [
      {
        path: '/',
        exact: true,
        component: LandingPage,
      },
      {
        path: '/login',
        exact: true,
        component: lazy(() => import('./containers/Login')),
      },
      {
        path: '/register',
        exact: true,
        component: lazy(() => import('./containers/Register')),
      },
      {
        path: '/password/reset',
        exact: true,
        component: lazy(() => import('./containers/PasswordReset')),
      },
      {
        path: '/password/token/:token',
        exact: true,
        component: lazy(() => import('./containers/PasswordReset')),
      },
      {
        path: '/password/request/:status',
        exact: true,
        component: lazy(() => import('./containers/Confirmation')),
      },
      {
        path: 'email/confirmation',
        exact: true,
        component: lazy(() => import('./containers/Confirmation')),
      },
      {
        path: '/blog',
        exact: true,
        component: lazy(() => import('./containers/Blog/Home')),
      },
      {
        component: () => <Redirect to="/errors/error-404" />,
      },
    ],
  },
]

export default routes

这是我的 app.js 文件

import React from 'react';
import { Router } from '@reach/router'
import { Provider } from 'react-redux';
import CookiesProvider from 'react-cookie/cjs/CookiesProvider'
import { Cookies } from 'react-cookie'
import jwt_decode from 'jwt-decode';
import { setAuthToken } from '../services';
import { setCurrentUser, logoutUser } from '../store/actions/authActions';
import store from '../store/store'
import Alert from '../components/Alert'
import { H_JWT_COOKIE } from '../constants/constants';

import { renderRoutes } from 'react-router-config';

import routes from '../routes'

// Check for token
const cookie = new Cookies()
if(cookie.get(H_JWT_COOKIE)) {
  // Set AuthToken
  setAuthToken(cookie.get(H_JWT_COOKIE));
  // Decode token and get user info and expiration
  const decoded = jwt_decode(cookie.get(H_JWT_COOKIE));
  // Set user and isAuthenticated
  store.dispatch(setCurrentUser(decoded));

  // Chek for expired token
  const currentTime = Date.now() / 1000
  if(decoded.exo < currentTime) {
    store.dispatch(logoutUser());
    window.location.href = '/login';
  }
}


const App = () => {
  return (
    <CookiesProvider>
        <Provider store ={store}>
          <Router  >
          <Alert />
            {renderRoutes(routes)}

          </Router>

        </Provider>
    </CookiesProvider>



  );
};

export default App

是否有任何教程如何以类似的方式处理 Gatby 中的路由？我希望能够创建动态网址。我可以在 Gatsby 中使用这个 react-router-config 吗？我正在尝试在 gatsby-node.js 中使用 renderRoutes 但它不成功。

【问题讨论】：

标签： javascript reactjs gatsby

【解决方案1】：

如果您使用这样的客户端渲染方法，您将不会从 Gatsby 中获得太多好处。考虑在解决身份验证时使用骨架渲染页面并更新道具。至少通过这种方式，公共内容和您的基础 HTML 文档可以提前静态呈现。您还想切换到使用 webpack 来处理每页的导入（非动态导入），让 Gatsby 协调默认的到达路由器设置。

【讨论】：