反应路由器不工作，控制台中没有错误或编译错误显示 [反应路由器 dom v5]

Question

到目前为止，路由器工作得很好，但突然就不能用了。我很困惑，我还没有进行任何升级。

路由器本身不渲染组件。我想知道是否根据路径渲染了正确的路线。

只有第一条路线没问题，其他两条好像不行。

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')
);

App.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

Answer 1

问题

AssetPage 组件在 "/assets/add" 路径上呈现并且没有其他 "/assets*" 路径，因此其他两个 link 不会 link 到呈现内容的任何路由。

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

换句话说，当您 link 到 "/assets/view" 或 "/assets/storage" 路径不再匹配 "/assets/add" 并且 AssetPage 组件被卸载。

解决方案

我确定您希望此根路由只是 "/assets" 以允许进一步匹配任何 "/assets*" 路径。

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

反应路由器不工作，控制台中没有错误或编译错误显示 [反应路由器 dom v5]

react router not working and no erros in console or compilation error is shown [ react router dom v5]

reactjs

react-router

react-router-dom

问题

解决方案