Jestem w stanie poruszać się z /about do /portfolio. Mogę iść do /portfolio/subItem1 lub /portfolio/subItem2. Mogę kliknąć przycisk Wstecz, aby powrócić do /portfolio. Ale nie mogę kliknąć połączenia NAV podczas jakiejkolwiek trasy podcielu, aby przejść do /portfolio.

Podejrzewam jakiś błąd routingu, prawdopodobnie między routerem górnym poziomem na App i podnazie na komponencie Portfolio. Używam reakcji routera-dom 5.2.0.

// top level component

const bodyViews: Record<string, ComponentData> = {
  cover: { name: "Home", slug: '/', component: Cover },
  portfolio: { name: "Portfolio", slug: "/portfolio", component: Portfolio },
  about: { name: "About", slug: '/about', component: About },
  contact: { name: "Contact", slug: '/contact', component: Contact }
}


function App() {
  return (
    <OutermostStyleContainer>
      <BrowserRouter>
        <Nav bodyViews={bodyViews} />

        <main>
          <Switch>
              <Route path='/about'><About /></Route>
              <Route path='/contact'><Contact /></Route>
              <Route path='/portfolio'><Portfolio /></Route>
              <Route path='/' exact><Cover /></Route>
          </Switch>
        </main>
      </BrowserRouter>
    </OutermostStyleContainer>
  );
}


// reduced portfolio component
interface PropsShape {}

export default (props: PropsShape) => {

  return (
    <BrowserRouter>
      <section>
        <Switch>
          {/* Routes to sub-views */}
          <Route path={`${useRouteMatch().path}/call-track-voipms`}>
            <CallTrackVoipMs GithubLogo={GithubLogo} />
          </Route>
          {/* Nav links on category view */}
          <ItemPreviews 
            previewData={typeCheckedNavigationData} 
            portfolioRoute={useRouteMatch().url} 
          />
        </Switch>
      </section>
    </BrowserRouter>
  )
}

// full Nav component
export default (props: PropsShape) => {
  return (
    <nav>
      <div>
        <LinkList jsxData={props.bodyViews} />
      </div>
    </nav>
  )
}

// LinkList. NavList is a styled HOC of <ul>
export default (props: { jsxData: Record<string, ComponentData> }) => {
  return (
    <section>
      <NavList>
        { Object.values(props.jsxData).map((nameAndSlug: ComponentData) => (
          <SingleLinkListItem linkData={nameAndSlug} />
        )) }
      </NavList>
    </section>
  )
} 

// SingleListItem. StyledLink is as the name suggests
export default (props: { linkData: ComponentData }): JSX.Element => {
  return (
  <li>
    <StyledLink to={props.linkData.slug}>{props.linkData.name}</StyledLink>
  </li>
  )
}

Czy ktoś widzi, co powoduje problem routingu?

0
Sean D 31 lipiec 2020, 15:26

1 odpowiedź

Najlepsza odpowiedź

Myślę, że nie powinieneś owinąć komponent Portfolio z <BrowserRouter>. Powinieneś owinąć tylko górę komponentu za pomocą <BrowserRouter>. I możesz owinąć swoje elementy dziecka za pomocą <Switch>.

// reduced portfolio component
interface PropsShape {}

export default (props: PropsShape) => {

  return (
      <section>
        <Switch>
          {/* Routes to sub-views */}
          <Route path={`${useRouteMatch().path}/call-track-voipms`}>
            <CallTrackVoipMs GithubLogo={GithubLogo} />
          </Route>
          {/* Nav links on category view */}
          <ItemPreviews 
            previewData={typeCheckedNavigationData} 
            portfolioRoute={useRouteMatch().url} 
          />
        </Switch>
      </section>
  )
}
1
Beyond 31 lipiec 2020, 12:36