到目前為止，路由器作業正常，但突然無法正常作業。我完全糊涂了，我還沒有進行任何升級。

路由器本身不會渲染組件。我想知道是否即使正確的路線也會根據路徑呈現。

只有第一條路線作業正常，其他兩條似乎不起作用。

AssetPage.js

import React from "react";
import { Route } from "react-router-dom";
import AssetNavBar from "./AssetNavBar";
import "./assets.css";

function AssetPage() {
  return (
    <div className="top-div">
  <header>
    <AssetNavBar />
  </header>
  <main className="main-flex">
    <Route path="/assets/add" exact><h1>in main</h1></Route>
    <Route path="/assets/storage">
      <h1>in storage</h1>
    </Route>
      <Route path="/assets/view">
      <h1>in view</h1>
      </Route>
    </main>
   </div>
   );
 }

  export default AssetPage;

AssetNavBar.js

import React from "react";
import {Link} from 'react-router-dom';

 function AssetNavBar() {
  return (
   <div>
     <nav>
      <ul className="ul-side-by-side">
        <li>
        <Link to="/assets/add">add assets</Link>
      </li>
      <li>
        <Link to="/assets/view">view assets</Link>
      </li>
      <li>
        <Link to="/assets/storage">storage</Link>
      </li>
    </ul>
     </nav>
   </div>
 );
 }
 export default AssetNavBar;

index.js - [起點]

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

應用程式.js

import "./App.css";
import { Route } from "react-router-dom";
import SingleItem from "./components/inventory/SingleItem"
import HomeNavBar from "./components/HomeNavBar";
import InventoryPage from "./components/inventory/InventoryPage";
import ProductPage from "./components/products/ProductPage";
import PurchasePage from "./components/purchase/PurchasePage";
import SupplierPage from "./components/supplier/SupplierPage";
import AssetPage from "./components/assetFolder/AssetPage";

function App() {
  return (
    <div className='horizontal-div-boxes'>
      <header>
        <HomeNavBar/>
      </header>
      <main className="main-flex">
        <Route path="/dashboard">
          <SingleItem />
        </Route>
        <Route path='/inventory'>
          <InventoryPage/>
        </Route>
        <Route path='/purchase'>
          <PurchasePage/>
        </Route>
        <Route path='/products/add'>
          <ProductPage/>
        </Route>
        <Route path='/suppliers/add'>
         <SupplierPage/>
        </Route>
        <Route path='/assets/add'>
            <AssetPage/>
        </Route>
      </main>
    </div>
  );
}

export default App;

版本

└─┬ react-router-dom@5.3.0       
  └── react-router@5.2.1

uj5u.com熱心網友回復：

問題

該AssetPage組件在一個路徑上呈現，"/assets/add"并且沒有其他"/assets*"路徑，因此其他兩個鏈接不會鏈接到任何呈現內容的路由。

<Route path='/assets/add'>
  <AssetPage />
</Route>

換句話說，當您鏈接到"/assets/view"或"/assets/storage"路徑不再匹配"/assets/add"并且AssetPage組件被卸載時。

解決方案

我確定您希望此根路由僅"/assets"允許進一步匹配任何"/assets*"路徑。

<Route path='/assets'>
  <AssetPage />
</Route>

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

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

上一篇：Reduxdevtools顯示未定義狀態但完美呈現

下一篇：需要了解ReactFC的行內函式呼叫

反應路由器不作業并且控制臺中沒有錯誤或顯示編譯錯誤[反應路由器domv5]

問題

解決方案