更改路径时 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

我只是碰巧看到了您的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 2

store 组件应该接收 children 道具并将其传递给 Layout，例如：

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

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

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仅提供上下文值，而不是混入其他 UI 布局和路由上下文问题。 Store应该渲染Provider和children道具。

例子：

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

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