我已经创建了一个react应用程序,它有一个主页和15个页面上包含15个问题的调查。我使用BrowserRouter
将主页 Package 在'/'
路由中。我在MemoryRouter
下列出了15个页面,使其显示在'/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;
1条答案
按热度按时间vyu0f0g11#
如果我理解你的帖子和评论是正确的,你似乎是说
BusinessType
组件正在呈现,即使当前的URL路径是"/"
.这里的问题是MemoryRouter
路径匹配没有耦合到浏览器的地址栏,你已经初始化为"/apply"
,所以这是"路径"无论浏览器地址栏中的URL是什么,都将匹配和呈现该URL。我使用了两个独立的路由器,因为调查的所有页面都应该在"/apply "路由下。
在这种情况下,我建议在主
BrowserRouter
中的适当路由路径下呈现所有这些路由。示例: