react-router-dom 更改路径时不工作

Question

我正在尝试使用 react-router 渲染组件 Home 和 About，但我什么也没得到。我认为问题出在存储区的索引文件中。我该如何解决？

index.js

import React from "react";
import reactDom from "react-dom/client";
import App from "./App";
import Store from "./Store";

const root = reactDom.createRoot(document.getElementById("root"));

root.render(
  <Store>
    <App />
  </Store>
);

商店

import React, {createContext, useState} from 'react'
import Layout from './Layout'

export const Data = createContext()


function Store({ children }) {
  const [state, setState] = useState(true)
  const  value = {state, setState}

  return (
    <Data.Provider value={value}>
      <Layout>{children}</Layout>
    </Data.Provider>
  )
}

export default Store

布局

import React, { useContext } from "react";
import { Data } from "./Store";
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Routes,
  Link,
} from "react-router-dom";

function Layout({ children }) {
  const { state } = useContext(Data);
  return (
    <div className="layout">
      <Router>
        <div>
        <Link to="/">Home</Link>
          <Link to="/about">About</Link>        </div>
        <div className={`${state ? "hide" : "show"} mobil `}>
          <div className="children">{children} </div>
        </div>
      </Router>
    </div>
  );
}

export default Layout;

应用程序

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;

Answer 1

商店组件应该接收子道具并将其传递给布局，例如：

function Store({children}) {
  const [state, setState] = useState(true)
  const  value = {state, setState}

  return (
    <Data.Provider value={value}>
      <Layout>{children}</Layout>
    </Data.Provider>
  )
}

Answer 2

我刚好看到你的 Layout.js 文件。

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

您不能使用 <Router>，因为 Layout 被递归使用，并且隐式地嵌套了 <Router> 元素。最好在您的应用程序加载之前只使用该元素一次。

Answer 3

问题

您共享的代码正在另一个 Layout 组件中渲染一个 Layout 组件。 Layout 组件正在呈现 Router。在另一个路由器中呈现一个路由器是一种不变的违规行为。

function Layout({ children }) {
  const { state } = useContext(Data);
  return (
    <div className="layout">
      <Router> // <-- nested router!!
        <div>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>{" "}
        </div>
        <div className={`${state ? "hide" : "show"} mobil `}>
          <div className="children">{children} </div>
        </div>
      </Router>
    </div>
  );
}

Store 和 App 组件都在渲染 Layout 组件，Store 直接渲染 App.

解决方案

从 Store 或 App 中删除一个或另一个 Layout 组件。我建议将其从 Store 中删除，因此 Store 仅提供上下文值而不是混入其他 [=48] =] 布局和路由上下文问题。 Store 应该渲染 Provider 和 children 属性。

示例：

function Store({ children }) {
  const [state, setState] = useState(true);
  const value = { state, setState };

  return (
    <Data.Provider value={value}>
      {children}
    </Data.Provider>
  );
}

react-router-dom 更改路径时不工作

react-router-dom not working when change path

javascript

reactjs

react-router

react-router-dom

问题

解决方案