Question

我有以下通往市场的路线：

/offer/:id
/store/:store/offer/:id
/dashboard

我创建了一个组件以重用商店的路线，这些路线与市场上的常见路线相同，但是我不知道为什么路线无法识别或不匹配。

代码在这里：

index.js

<Provider store={store}>
    <BrowserRouter>
        <App />
    </BrowserRouter>
</Provider>

App.js

<ErrorBoundary>
    <MuiThemeProvider theme={theme}>
        <CssBaseline />
        <BasenameProvider value={[basename, setBasename]}>
            <Layout>
                <Suspense fallback={<Spinner />}>
                    <Routes />
                </Suspense>
            </Layout>
        </BasenameProvider>
    </MuiThemeProvider>
</ErrorBoundary>

Routes.js

<Switch>
  <Marketplace />
  <Dashboard />
  <Redirect to="/" />
</Switch>

Marketplace.js

import React, { useEffect, lazy } from 'react'
import { Route, withRouter } from 'react-router-dom'
import { useDispatch } from 'react-redux'

import { fetchCities, fetchCategories, onTryAutoSelectedCity } from '../../store/actions'

import MarketplaceRoutes from './MarketplaceRoutes'
const Store = lazy(() =>
  import('../../containers/Marketplace/Store'))

const Marketplace = () => {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchCities())
    dispatch(fetchCategories())
    dispatch(onTryAutoSelectedCity())
  }, [dispatch])

  return (
    <>
      <MarketplaceRoutes pathname='' />
      <Route path="/store/:store" component={Store} />
    </>
  )
}

export default withRouter(Marketplace)

Store.js

import React, { useEffect } from 'react'
import { useDispatch } from 'react-redux'

import { fetchSaleChannelByStore } from '../../store/ducks/saleChannel'

import MarketplaceRoutes from './MarketplaceRoutes'

const Store = ({
  match,
}) => {
  const dispatch = useDispatch()

  useEffect(() => {
    if (match.params && match.params.store) {
      dispatch(fetchSaleChannelByStore(match.params.store))
    }
  }, [dispatch, match])

  return (
    <MarketplaceRoutes pathname={match.url} />
  )
}

export default Store

MarketplaceRoutes.js

import React, { lazy, useEffect, useContext } from 'react'
import { Route } from 'react-router-dom'

import BasenameContext from '../../hooks/useBasename'

const Home = lazy(() =>
  import('../../containers/Marketplace/Home/Home'))
const OfferDetails = lazy(() =>
  import('../../containers/Marketplace/OfferDetails/OfferDetails'))
const Cart = lazy(() =>
  import('../../containers/Marketplace/Cart/Cart'))
const Checkout = lazy(() =>
  import('../../containers/Marketplace/Checkout/Checkout'))
const Receipt = lazy(() =>
  import('../../containers/Marketplace/Receipt/Receipt'))
const Auth = lazy(() =>
  import('../../containers/Marketplace/Auth/Auth'))
const Logout = lazy(() =>
  import('../../containers/Marketplace/Auth/Logout/Logout'))

const MarketplaceRoutes = ({
  pathname,
}) => {
  const [basename, setBasename] = useContext(BasenameContext)

  useEffect(() => {
    setBasename(pathname)
  }, [pathname])

  return (
    <>
      <Route exact path={pathname === '' ? '/' : pathname}
        component={Home} />
      <Route path={`${pathname}/oferta/:id`} component={OfferDetails} />
      <Route exact path={`${pathname}/cart`} component={Cart} />
      <Route path={`${pathname}/cart/checkout`} component={Checkout} />
      <Route path={`${pathname}/cart/receipt`} component={Receipt} />
      <Route path={`${pathname}/auth`} component={Auth} />
      <Route path={`${pathname}/logout`} component={Logout} />
    </>
  )
}

export default MarketplaceRoutes

Dashboard.js

import React, { lazy } from 'react'
import { Route } from 'react-router-dom'
const Main = lazy(() => import('./Main/Main'))
const Dashboard = () => (
  <Route exact path="/dashboard" component={() => (<p>dashboard</p>)} />
)
export default Dashboard

我需要路线进行比赛。我在做错什么吗？

为什么在这种情况下，反应路线无法按预期运行？

0 个答案: