更改路径时反应路由器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 时，它可以工作