将 React 路由器与交换机一起使用，并且在更改路由时无法让页面呈现不同的组件

Question

我创建了一个 React 应用程序，该应用程序最终将根据 API 调用动态分配路由。现在我已经硬编码了组件，我只是尝试切换页面视图以根据导航选择查看每个组件。我在开关视图之外设置了导航，以便它始终在页面上呈现，但是当我尝试将我的 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

所以我认为正在发生的事情是，既然您在交换机之外定义了 Nav 路由并为其提供了路径。它最终总是会呈现在其他所有内容之上，因为您将路径作为一项要求，并且每当您导航到其他地方时仍然满足该路径。您可以做的是一起删除导航的路线并执行此操作。这将使导航无论如何都出现在顶部，而不会中断您的导航。您似乎也没有导入浏览器路由器。

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