React应用中分离MemoryRouter与BrowserRouter的问题

我创建了一个包含首页和15页问卷的React应用，用BrowserRouter包裹首页的/路由，把15页问卷放在MemoryRouter下，想要在/apply路由展示问卷。但现在MemoryRouter的内容在/路由也能看到，需要实现仅在/apply路径显示它。

原代码：

import React from "react";
import BusinessType from "./BusinessType";
import {
  BrowserRouter as Router,
  MemoryRouter,
  Routes,
  Route
} from "react-router-dom";
import Howmuch from "./Howmuch";
import Seeking from "./Seeking";
import Date from "./Date";
import AnnualRevenue from "./Annualrevenue";
import Creditscore from "./Creditscore";
import BusinessName from "./BusinessName";
import Industry from "./Industry";
import Deposit from "./Deposit";
import Zipcode from "./Zipcode";
import Name from "./Name";
import Phone from "./Phone";
import Email from "./Email";
import Home from "./Pages/Home";
import Require from "./Require";
import Apply from "./Apply";

function App() {
  return(
    <div>
      <Router>
        <div>
          <Routes>
            <Route exact path='/' element={<Home />}  />
          </Routes>
        </div>
      </Router>
       
      <MemoryRouter initialEntries={['/apply']} initialIndex={0}>
        <Routes>
          <Route path='/apply' element={<BusinessType />} />
          <Route path='/Qn2' element={<Howmuch />} />
          <Route path='/Qn3' element={<Seeking />} />
          <Route path='/Qn4' element={<Date />} />
          <Route path='/Qn5' element={<AnnualRevenue />} />
          <Route path='/Qn6' element={<Creditscore />} />
          <Route path='/Qn7' element={<BusinessName />} />
          <Route path='/Qn8' element={<Industry />} />
          <Route path='/Qn9' element={<Deposit />} />
          <Route path='/Qn10' element={<Zipcode />} />
          <Route path='/Qn11' element={<Name />} />
          <Route path='/Qn12' element={<Phone />} />
          <Route path='/Qn13' element={<Email />} />
          <Route path='/final' element={<Require />} />
          <Route path='/congrats' element={<Apply />} />
        </Routes>
      </MemoryRouter>
    </div>
  );
}

export default App;

问题原因 #

当前代码里BrowserRouter和MemoryRouter是同级渲染的，不管访问/还是/apply，两个路由组件都会被渲染，所以MemoryRouter的内容会一直显示在页面上。

解决方案 #

把MemoryRouter及其内部的问卷路由，作为BrowserRouter中/apply路由的element内容，这样只有访问/apply路径时，才会加载MemoryRouter和问卷页面。

修改后的完整代码：

import React from "react";
import BusinessType from "./BusinessType";
import {
  BrowserRouter as Router,
  MemoryRouter,
  Routes,
  Route
} from "react-router-dom";
import Howmuch from "./Howmuch";
import Seeking from "./Seeking";
import Date from "./Date";
import AnnualRevenue from "./Annualrevenue";
import Creditscore from "./Creditscore";
import BusinessName from "./BusinessName";
import Industry from "./Industry";
import Deposit from "./Deposit";
import Zipcode from "./Zipcode";
import Name from "./Name";
import Phone from "./Phone";
import Email from "./Email";
import Home from "./Pages/Home";
import Require from "./Require";
import Apply from "./Apply";

function App() {
  return(
    <Router>
      <Routes>
        {/* 首页路由，仅在根路径渲染 */}
        <Route path='/' element={<Home />}  />
        {/* 问卷路由，仅在/apply路径渲染MemoryRouter */}
        <Route path='/apply' element={
          <MemoryRouter initialEntries={['/apply']} initialIndex={0}>
            <Routes>
              <Route path='/apply' element={<BusinessType />} />
              <Route path='/Qn2' element={<Howmuch />} />
              <Route path='/Qn3' element={<Seeking />} />
              <Route path='/Qn4' element={<Date />} />
              <Route path='/Qn5' element={<AnnualRevenue />} />
              <Route path='/Qn6' element={<Creditscore />} />
              <Route path='/Qn7' element={<BusinessName />} />
              <Route path='/Qn8' element={<Industry />} />
              <Route path='/Qn9' element={<Deposit />} />
              <Route path='/Qn10' element={<Zipcode />} />
              <Route path='/Qn11' element={<Name />} />
              <Route path='/Qn12' element={<Phone />} />
              <Route path='/Qn13' element={<Email />} />
              <Route path='/final' element={<Require />} />
              <Route path='/congrats' element={<Apply />} />
            </Routes>
          </MemoryRouter>
        } />
      </Routes>
    </Router>
  );
}

export default App;

这样修改后，访问根路径/时只会显示首页；访问/apply时才会加载问卷的路由环境，完全符合需求。

内容的提问来源于stack exchange，提问作者Kaviya Raja