我有一個帶有 React Router Dom 的 React 應用程式，并在路徑與根目錄不匹配時v6嘗試渲染組件，但我無法讓它作業。這是我的代碼：Nav"/"

import { BrowserRouter as Router, Routes, Route, matchPath } from "react-router-dom";
import Nav from "./components/Nav/Nav";
import Home from "./components/Home/Home";
import Contributors from "./components/Contributors/Contributors";

const App = () => {
    const match = matchPath({ path: "/", end: true }, "/");
    return (
        <Router>
            {!match ? <Nav /> : null}
            <Routes>
                <Route path="/" exact element={<Home />} />
                <Route path="/contributors" element={<Contributors />} />
            </Routes>
        </Router>
    );
}

export default App;

我應該如何解決這個問題？

uj5u.com熱心網友回復：

快速解決方案：

您可以像下面這樣簡單地添加Nav您想要的位置。我不確定您是否可以知道中的路徑App，因為它沒有包含在Router.

import { BrowserRouter as Router, Routes, Route, matchPath } from "react-router-dom";
import Nav from "./components/Nav/Nav";
import Home from "./components/Home/Home";
import Contributors from "./components/Contributors/Contributors";

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" exact element={<Home />} />
                <Route path="/contributors" element={<><Nav /><Contributors /></>} />
            </Routes>
        </Router>
    );
}

export default App;

改進：

如果你想更進一步，你可以設定一個組件，而不是像上面那樣，你可以設定一個Layout組件，如下所示：

import { Outlet } from "react-router-dom";
import Nav from "../Nav/Nav";

const Layout () => {
  return (
    <>
      <Nav />
      <Outlet />
    </>
  );
};

export default Layout;

并渲染您想要通過的Nav路線Layout：

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

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" exact element={<Home />} />
                <Route element={<Layout />}>
                   <Route path="/contributors" element={<Contributors />} />
                </Route>
                
            </Routes>
        </Router>
    );
}

export default App;

uj5u.com熱心網友回復：

您需要<Router>從App組件中洗掉，而是將組件包裝在index.tsx檔案中，如下所示：

<Router>
 <App />
</Router>

然后你可以像你已經做的那樣做剩下的事情，但是使用函式pathname的引數matchPath：

const App = () => {
  const { pathname } = useLocation();
  const match = matchPath({ path: "/", end: true }, pathname);

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/492527.html

標籤：javascript 反应反应路由器反应路由器dom

上一篇：什么會導致NodeJavaScript中錯誤地報告字串長度？

下一篇：CSSGrid被覆寫，我不知道為什么

ReactRouterDom，只為某些路由渲染組件

快速解決方案：

改進：