Question

我的next.js应用有问题。似乎当相同的组件被渲染两次时，它不会正确更新URL。

我有一个主要的组件包装器，可以解决所有问题：

import React from "react"
import "babel-polyfill"
import root from "window-or-global"
import { withRouter } from "next/router"
import commonApi from "./../../common/common"
import AppLayout from "./../../components/main/AppLayoutWrapper"
import configureStore from "./../../redux/configureStore"
import routes from "./../../../server/routes/routes"

const { makeWithRedux } = configureStore
const { Router } = routes
const { getRequestAreaInformation } = commonApi

let store = null

const MainWrapper = (Page: React$Node) => {
  const PageWrapper = class PageWrapper extends React.Component<{}> {
    static async getInitialProps(req: any) {
      return getRequestAreaInformation(req)
    }
    // Required to make the components work on page load, but fragile
    componentDidMount() {
      this.props.actions.urlLocationChanged(this.props.router)
    }

    render() {
      this.props.actions.urlLocationChanged(this.props.router)
      if (Page.getInitialProps) {
        Promise.resolve(Page.getInitialProps({ ...this.props })).then(() => {})
      }
      if (AppLayout.getInitialProps) {
        Promise.resolve(AppLayout.getInitialProps({ ...this.props })).then(() => {})
      }

      return (
        <section className="main-wrapper-jsx">
          <AppLayout {...this.props}>
            <Page {...this.props} />
          </AppLayout>
        </section>
      )
    }
  }
  return withRouter(makeWithRedux(PageWrapper))
}

export default MainWrapper

路线文件链接到此：

const link = require("next/link")
const router = require("next/router")

const NextRouter = router.default || router
const NextLink = link.default || link

const routes = require("next-routes")({
  Router: NextRouter,
  Link: NextLink,
})

const MediaListView = "MediaListView"
const AuthView = "auth/AuthView"
const LibraryView = "LibraryView"

routes
  .add("root", "/", LibraryView)
  .add("home", "/home", LibraryView)
  .add("search", "/search", MediaListView)
  .add("login", "/login", AuthView)
  .add("register", "/register", AuthView)

module.exports = routes

最后，还有实现此操作的redux商店。

import { handleActions, createAction } from "redux-actions"
import { fromJS, toJS } from "immutable"
import root from "window-or-global"

const initialState = fromJS({
  asPath: "",
  pathname: "",
  query: {},
  route: "",
})

const urlLocationChanged = createAction(`${routeParams.URL_LOCATION_CHANGED}`, (url) => {
  return url
})


const actions = {
  urlLocationChanged,
}

const routeActions = handleActions(
  {
    URL_LOCATION_CHANGED: (state, {payload}) => {
      const location = payload

      const pathname = decodeURIComponent(location.asPath.slice(1))
      let param = pathname
      if (param && param.match(/\w+\D/)) {
        param = param.match(/\w+\D/)[0] 
      }
        return state
          .set("location", location)

      }
      return state.set("location", location)
    },
  },
  initialState,
)

export default {
  initialState,
  routeActions,
  actions,
}

所有这一切都应该有效，但只要有两次点击同一个对象，我们就说有人点击login然后点击register，就没有任何反应。

带有路由器的Next.js并不总是更新页面

0 个答案: