使用 React Router 更改某些组件

Question

我正在开发一个 React 应用程序，我已经开始尝试实现 React Router，以便我可以根据 URL 交换页面上的某些组件。我一直在四处搜索并阅读 React router 自己的文档，但我发现的所有内容似乎都已过时或不完全符合我的要求。

and this post seem to be close to what I want but I've tried implementing the solution on the first thread without success and the tutorial 在 React Router 的文档站点上看起来确实与第一个解决方案非常相似，但它专注于多个不同的页面而不是一个组件被换出的页面。

希望我没有让任何人对这种描述感到困惑，但如果是这样，请告诉我，我会尽力澄清。

我的问题的常见解决方案似乎是这样的。

建议的文档解决方案：

React Router 的文档说你这样做是为了根据 const rootElement = document.getElementById("root"); 看起来等同于“index.js”。然后根据应该去的地方添加链接。

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);

下面是我的实现。

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="view" element={<BookViewPane />} />
      <Route path="add" element={<AddBookPane />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById('root'))

我遇到的问题：

我已经在我的页面上这样做了，它确实有效，但不是我想要的那样。这是加载具有不同组件的新页面的好方法，但我的 React 页面有多个组件在工作（headers、页脚等），并且一次只加载一个组件。我可以分别为所有页面的每个单独部分创建多个更大的组件，但这会成倍增加工作量并完全脱离使用 React 的目的。

该应用程序按应有的方式默认加载。一切正常，该在的地方。 Link 中的按钮 header 是我试验的临时部分。

这是 BookViewPane 注意 header 是如何丢失的。

我的解决方案尝试

我试图实现的是 "app.js" 中的一个开关，它会检测当前的 URL 并在它出现时加载特定组件需要。我删掉了不需要的东西。

return(
        <React.Fragment>
            <div>
                <SignIn />
                <BookDetails />
            </div>
            <Header />
            <main>
                <div>
                    <BrowserRouter>
                        <Routes>
                            <Route path={["/", "/main"]} element={<MainPane />}>
                                <Route exact path="/view" element={<BookViewPane />} />
                                <Route exact path="/add" element={<BookAddPane/>} />
                            </Route>
                        </Routes>
                    </BrowserRouter>
            </div>
            </main>
            <Footer />
        
        </React.Fragment>
    );

还有我的index.js文件

  ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
  document.getElementById('root'))

我基本上采用了以前的解决方案，但我无法让它发挥作用。我从上面的线程和文档中提取了这个想法，但我显然不明白它是如何完成的。有什么我不明白的，忘了包括或者这根本不可能吗？任何信息都会很棒！

更新

我已经从 index.js 文件中删除了标记，这删除了我收到的主要错误之一。我已经开始处理其他错误报告，并且会更新我找到的任何修复程序。

Answer 1

路径必须准确，也不需要 {["/main"]}。

有几件事需要完成。

第一步：

<Route path={["/", "/main"]} element={<MainPane />}>

必须改为...

<Route exact path="/" element={<MainPane />} />

没有 exact 关键字路由仅在 location.pathname 的开头匹配路径

时检查

第二步

从 index.js 中删除 <BrowserRouter> 包装器，这样就只剩下了。您不能在另一个 Router 中渲染 Router，因此 Index.js 中的 Router 根本无法保留。

第三步

移动 app.js 中的 <BrowserRouter> 标签，使它们位于 return 括号内，而不是仅位于单个括号内<div>。这允许 app.js 将 React Router 识别为一个组件。

return(
    <BrowserRouter>
        <React.Fragment>
            <div>
                <SignIn />
                <BookDetails />
            </div>
            <Header />
            <main>
               <div>
                  <Routes>
                     <Route path={["/", "/main"]} element={<MainPane />} />
                     <Route exact path="/view" element={<BookViewPane />} />
                     <Route exact path="/add" element={<BookAddPane/>} />
                  </Routes>      
               </div>
            </main>
            <Footer />
        
        </React.Fragment>
      </BrowserRouter>
    );

在此之后，URL 应该会按预期工作。

顺便说一句。确保您是运行 React 18 以确保完全兼容。 Check here 获取有关更新项目的信息。

使用 React Router 更改某些组件

Using React Router to change certain components

reactjs

react-router

建议的文档解决方案：

我遇到的问题：

我的解决方案尝试

更新

第一步：

第二步

第三步