反应路由器 dom 无法访问某些组件

Question

早上好，社区 Whosebug.I 不得不使用路由访问应用程序内的某些组件，但这对我不起作用，尽管我已经安装了“npm install react-router-dom”浏览器给我一个空白文件，所以这是我的全部文件： app.js 文件：

import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
import {BrowserRouter, Route, Switch} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
     
   <div className="grid-container" >
    <header className="row" >
      <div>
        <a className="brand" href="/">My Shop</a>
      </div>
      <div>
        <a href="/cart">Cart</a>
        <a href="/signin">Sign In</a>
      </div>
    </header >
    <main>
   
   <Route path="/" component={HomeScreen} ></Route>
   <Route path="/product/:id" component={ProductScreen} ></Route>
      
    </main>
    <footer classNameName="row center" >All right reserved</footer>
   </div>
  
   </BrowserRouter>
  );
}

export default App;

这是主屏幕文件：

import React from "react";
import {data} from '../data';
import Product from '../components/Product';

function HomeScreen () {
    return (
        <div>
        <div className="row center">
      {data.products.map((product) => (
       <Product key={product._id} product={product} ></Product> 
        ))}
     
  </div>
  </div>
    )
};
export default HomeScreen;

这是 ProductScreen 文件：

import React from "react";

function ProductScreen () {
    return (
        <div>Product Screen</div>
    )
};
export default ProductScreen;

这是产品文件代码：

import React from 'react';
import Rating from './Rating';

function Product (props) {
    const {product} = props;
    return (

         <div className="card">
          <a href="product.html">
            <img className="medium" src={product.image} alt={product.name} />
          </a>
          <div className="card-body">
            <a href="product.html">
            <h2>{product.name}</h2>  
            </a>
           <Rating rating={product.rating} numReviews={product.numReviews} ></Rating>
            <div className="price" >${product.price}</div>
          </div>
        </div>
    )
}

export default Product;

Answer 1

如果您使用的是版本 6，则必须用 <Routes> 包装 <Route> 个组件（您应该先导入组件），否则，用 <Switch> 个组件包装它们

Answer 2

在 react router v6 中，很多关键字都发生了变化。此外，还更改了 useHistory 等各种功能。检查 package.json 文件中的包版本。您还可以检查浏览器控制台是否有错误。

如果您有 v6 或更高版本，请如下更改 app.js 以使其正常工作。我已经更改了反应路由器关键字，缩进代码并将 Route 标记设置为自动关闭。

import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="grid-container" >
        <header className="row" >
          <div>
            <a className="brand" href="/">My Shop</a>
          </div>
          <div>
            <a href="/cart">Cart</a>
            <a href="/signin">Sign In</a>
          </div>
        </header>
      <main>
        <Routes>
          <Route path="/" element={<HomeScreen />} />
          <Route path="/product/:id" element={<ProductScreen />} />
        </Routes>
      </main>
      <footer classNameName="row center" >All right reserved</footer>
     </div>
   </Router>
  );
}

export default App;

反应路由器 dom 无法访问某些组件

react router dom don't work to access some component

reactjs

react-router-dom