代码之家 › 专栏 › 技术社区 › Mel

React router API-定义路由

react-router reactjs javascript

Mel · 技术社区 · 6 年前

我正在尝试使用react redux firebase应用程序作为我的应用程序的基础。

我尝试将静态页面添加到页脚链接(无状态),然后按照应用程序的预期呈现它们。

我以前从未见过这种设置route index.js的方法。

生成器创建此索引文件(我已尝试将About路由添加到该文件中):

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文件夹。该文件夹有一个AboutPage文件夹,其中包含一个js页面和索引,以及单独的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
}

保存时不会出现任何错误,但当启动服务器并单击链接时,只会出现404错误。

如何将路由添加到此应用程序?

我在routes/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:

从“./AboutPage”导入AboutPage

导出默认值AboutPage

然后src/routes/About/index.js

从“./components/AboutPage/index.js”导入AboutPage

//同步路由定义
导出默认值{
组件:关于页
}

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

我已经读了好几遍了-我搞不懂。如果孩子没有状态,那我就不明白为什么商店会是相关的。

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

0 回复 | 直到 6 年前