更改路徑時反應路由器dom不起作用

Question

我正在嘗試使用路由器進行反應，但更改路徑時我什么也沒得到，您可以在此處查看代碼鏈接.......................... ......

 import React from "react"; import Layout from "./Layout"; import Home from "./Home"; import About from "./About"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; function App() { return ( <Layout> <Router> <Routes> <Route exact path="/" element={<Home />} /> <Route path="/About" element={<About />} /> </Routes> </Router> </Layout> ); } export default App;

 import React from "react"; import { BrowserRouter as Router, Link } from "react-router-dom"; function Layout({ children }) { return ( <div> <Router> <Link to="/">Home</Link> <Link to="/about">About</Link> </Router> <div>{children}</div> </div> ); } export default Layout;

Answer 1

您需要從路由包裝中刪除路由器

從“反應”導入反應； 從“./Layout”導入布局； 從“./Home”導入主頁； 從“./About”導入關於； 從“react-router-dom”導入 { BrowserRouter as Routes, Route };

函數應用程序（）{返回（

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/About" element={<About />} />
</Routes>

); }

導出默認應用程序；

Answer 2

將<div>{children}</div>放在<Router>中，然后在app.js中刪除Router 。 因為這已經在<Layout>中聲明了

布局.js

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";

function Layout({ children }) {
  return (
    <div>
      <Router>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>

        <div>{children}</div>
      </Router>
    </div>
  );
}

export default Layout;

應用程序.js

import React from "react";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Layout>
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route path="/About" element={<About />} />
        </Routes>
    </Layout>
  );
}

export default App;

您當前的代碼將輸出以下內容：

<div>
  <Router>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
  </Router>

  {/* Children (App.js) */}
   <Router>
    <Routes>
      <Route exact path="/" element={<Home />} />
      <Route path="/About" element={<About />} />
    </Routes>
  </Router>
 {/* Children (App.js) */}
</div>

您不需要<Router>的兩個實例。

它應該是這樣的：

  <Router>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    
    {/* Children (App.js) */}
     <Routes>
      <Route exact path="/" element={<Home />} />
      <Route path="/About" element={<About />} />
    </Routes>
    {/* Children (App.js) */}
  </Router>

Answer 3

問題是，您的應用程序中有兩個不同的路由器。

您需要在 App.js 中的 Routercomponent 內移動布局組件

然后刪除Layout里面的第二個router。

更多信息在這里： 錯誤：useHref() 只能在 <Router> 組件的上下文中使用。 當我直接將 url 作為 localhost:3000/experiences 時，它可以工作