React-router API - определение маршрутов

Question

Я пытаюсь использовать приложениеact-redux-firebase в качестве основы для своего приложения.

Я пытаюсь добавить статические страницы в ссылки нижнего колонтитула (без состояния) и затем отобразить их какприложение ожидает.

Я не видел такого подхода к настройке маршрута index.js раньше.

Генератор создает этот индексный файл (к которому я попытался добавить маршрут «О маршруте»):

import CoreLayout from '../layouts/CoreLayout'
import Home from './Home'
import LoginRoute from './Login'
import SignupRoute from './Signup'
import ProjectsRoute from './Projects'
import AccountRoute from './Account'
import NotFoundRoute from './NotFound'
import AboutPage from "./About"


/*  Note: Instead of using JSX, we recommend using react-router
    PlainRoute objects to build route definitions.   */

export const createRoutes = store => ({
  path: '/',
  component: CoreLayout,
  indexRoute: Home,
  childRoutes: [
    AccountRoute(store),
    LoginRoute(store),
    SignupRoute(store),
    ProjectsRoute(store),
    AboutPage,
    // AsyncRoute(store) // async routes setup by passing store
    // SyncRoute, // sync routes just need route object by itself
    /* Place all Routes above here so NotFoundRoute can act as a 404 page */
    NotFoundRoute(store)
  ]
})

/*  Note: childRoutes can be chunked or otherwise loaded programmatically
    using getChildRoutes with the following signature:

    getChildRoutes (location, cb) {
      require.ensure([], (require) => {
        cb(null, [
          // Remove imports!
          require('./Counter').default(store)
        ])
      })
    }

    However, this is not necessary for code-splitting! It simply provides
    an API for async route definitions. Your code splitting should occur
    inside the route `getComponent` function, since it is only invoked
    when the route exists and matches.
*/

export default createRoutes

Этот макет приложения показывает, что все представления настроены в папке маршрутов.,Следуя такому подходу, я создал папку AboutPage в src / router / About / components.Эта папка имеет папку AboutPage со страницей js и в index, а также отдельный файл index.js (аналогично компоненту HomePage, предоставляемому сгенерированным приложением).Вложенный индекс имеет:

import AboutPage from './AboutPage'

export default AboutPage

src / routs / About / index.js

import AboutPage from './components/AboutPage/index.js'

// Sync route definition
export default {
  component: AboutPage
}

Я не получаю никаких ошибок при сохранении этого, но когда я запускаюсервер и нажмите на ссылку, я просто получаю ошибку 404.

Как добавить маршруты в это приложение?

Я пробовал миллион различных вариантов оператора импорта в маршрутах / index.js - многие из которых не вызывают ошибок, но на самом деле не вызывают ошибок.отрендерить страницу.

Полная настройка: src / маршруты / О программе / компоненты / AboutPage / AboutPage.js

class About extends React.Component {
  componentDidMount() {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
  }
  render() {
    const { classes, ...rest } = this.props;
    const imageClasses = classNames(
      classes.imgCard,
      classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    return (
      <div>
        -- intentionally deleted copy --
      </div>
    );
  }
}

export default withStyles(profilePageStyle)(About);

Затем, src / маршруты / компоненты / AboutPage / index.js:

import AboutPage from './AboutPage'

export default AboutPage

Затем src / маршруты / О программе / index.js

import AboutPage from './components/AboutPage/index.js'

// Sync route definition
export default {
  component: AboutPage
}

Затем маршруты / index.js - как показано выше.

Я прочитал это несколькораз - я не могу понять это.Если у ребенка нет государства, то я не понимаю, почему магазин был бы актуален.

https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#plainroute