Question

我正在尝试使用react-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

此应用的布局是所有视图似乎都在routes文件夹下设置。按照这种方法，我在src / routes / About / components中创建了AboutPage文件夹。该文件夹具有一个Aboutjs文件夹，其中包含一个js页面和索引，以及单独的index.js文件（类似于所生成的应用程序随附的HomePage组件）。嵌套索引具有：

import AboutPage from './AboutPage'

export default AboutPage

src / routes / About / index.js

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

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

保存时没有任何错误，但是当我启动服务器并单击链接时，我仅收到404错误。

如何向该应用添加路线？

我已经在route / index.js中的import语句上尝试了一百万种不同的变体-其中许多不会产生错误，但实际上不会呈现页面。

完整设置为src / routes / About / components / 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 / routes / components / AboutPage / index.js：

import AboutPage from './AboutPage'

export default AboutPage

然后src / routes / About / index.js

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

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

然后是route / index.js-如上所示。

我已经读过好几次了，我听不懂。如果孩子没有状态，那么我不明白为什么商店会很重要。

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

React-Router API-定义路由

0 个答案: