將React Router與Switch配合使用，並且在更改路線時無法獲取頁面以呈現不同的組件

Question

我創建了一個React應用，該應用最終將根據API調用動態分配路由。 現在，我已經對組件進行了硬編碼，而我只是試圖根據導航選擇來切換頁面視圖以查看每個組件。 我將Nav設置為在切換視圖之外，以便它始終在頁面上呈現，但是當我嘗試將WelcomePage設置為本地路線時，它也是唯一在頁面上呈現的東西，即使選擇其他組件也沒有任何改變我的導航頁面 關於為什么發生這種情況以及如何解決的任何建議/想法？

下面的代碼

Main App Component

import React from 'react'
import { Route, Redirect, Switch } from 'react-router-dom'
import ApplicationPage from './pages/ApplicationPage'
import FrameworkPage from './pages/FrameworkPage'
import WelcomePage from './pages/WelcomePage'
import Nav from './components/Nav'

const App = () => (
  <>
    <Route path={['/app/:appId', '/']} component={Nav} />
    <Switch>
    <Route path={['/app/:appId', '/']} component={WelcomePage} />
    <Route path={['/app', '/Framework']} component={FrameworkPage} />
      <Route
        path={['/app/:appId/setting/:settingKey', '/app/:appId', '/app']}
        component={ApplicationPage}
      />
      <Redirect to="/app/foo" />

    </Switch>

  </>
)

export default App

Nav Component

import React from 'react'
import styled from 'styled-components'
import { useAppState } from '../store'

const Nav = ({ match, history }) => {
  const [appState] = useAppState()

  return (
    <StyledNav>
      <h1>Title of Page</h1>
      <select
        defaultValue={match.params.appId}
        onChange={({ target }) => history.replace(`/app/${target.value}`)}
      >
        <option>Choose App</option>
        {appState.apps.map(opt => (
          <option key={opt}>{opt}</option>
        ))}
      </select>
    </StyledNav>
  )
}

const StyledNav = styled.nav`
  padding: 20px 10px;
  background: black;
  color: white;

  h1 {
    margin: 0;
  }
`

export default React.memo(
  Nav,
  (prevProps, nextProps) =>
    prevProps.match.params.appId === nextProps.match.params.appId
)

Answer 1

因此，我認為正在發生的事情是，因為您在Switch之外定義了Nav路線並為其提供了路徑。 它總是最終會呈現在其他所有東西之上，因為您將路徑作為要求，並且無論何時導航到其他地方，仍然滿足該路徑。 您可以做的就是將導航的所有路線全部移除，然后執行此操作。 這將使Nav無論在什么情況下都顯示在頂部，而不會中斷您的導航。 您似乎還沒有導入BrowserRouter。

import React from 'react'
import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'
import ApplicationPage from './pages/ApplicationPage'
import FrameworkPage from './pages/FrameworkPage'
import WelcomePage from './pages/WelcomePage'
import Nav from './components/Nav'

const App = () => (
  <BrowserRouter>
    <div>
       <Nav/>
       <Switch>
          <Route path={['/app/:appId', '/']} component={WelcomePage} />
          <Route path={['/app', '/Framework']} component={FrameworkPage} />
          <Route
        path={['/app/:appId/setting/:settingKey', '/app/:appId', '/app']}
        component={ApplicationPage}
      />
          <Redirect to="/app/foo" />

       </Switch>
    </div>
  <BrowserRouter/>
)

export default App