当我添加链接标签和路由时，我的 React 应用程序停止渲染任何内容

Question

所以我正在做在线商店，我正在一步一步地进行该项目，我正在做导航栏，但是当我使用链接标签并添加路由时，反应应用程序停止渲染，它在本地主机上给出空白屏幕。

导航栏.jsx

import React, { useState } from 'react'
import './Navbar.css'
import logo from '../Assets/logo.png'
import cart_icon from '../Assets/cart_icon.png'
import { Link } from 'react-router-dom'

export const Navbar = () => {

    const [menu,setMenu] = useState("shop")

  return (
    <div className='navbar'>
        <div className="nav-logo">
            <img src={logo} alt="" />
            <p>Books Store</p>
        </div>
        <ul className="nav-menu">
            <li onClick={()=>{setMenu("shop")}}><Link to='/'>Shop</Link>{menu==="shop"?<hr/>:<></>}</li>
            <li onClick={()=>{setMenu("mens")}}><Link to='/mens'>Men</Link>{menu==="mens"?<hr/>:<></>}</li>
            <li onClick={()=>{setMenu("womens")}}><Link to='/womens'>Women</Link>{menu==="womens"?<hr/>:<></>}</li>
            <li onClick={()=>{setMenu("kids")}}><Link to='/kids'>Kids</Link>{menu==="kids"?<hr/>:<></>}</li>
        </ul>
        <div className="nav-login-cart">
            <Link to='/login'><button>Login</button></Link>
            <Link to='/cart'><img src={cart_icon} alt="" /></Link>
            <div className="nav-cart-count">0</div>
        </div>
    </div>
  )
}

应用程序.js

import './App.css';
import { Navbar } from './Components/Navbar/Navbar';
import { BrowserRouter,Routes,Route } from 'react-router-dom';
import ShopCategory from './Pages/ShopCategory';
import Product from './Pages/Product';
import Cart from './Pages/Cart';
import LoginSignup from './Pages/LoginSignup';
import Shop from './Pages/Shop';

function App() {
  return (
    <div>
      <BrowserRouter>
      <Navbar/>
      <Routes>
        <Route path='/' element={<Shop/>}/>
        <Route path='/mens' element={<ShopCategory category="mens"/>}/>
        <Route path='/womens' element={<ShopCategory category="womens"/>}/>
        <Route path='/kids' element={<ShopCategory category="kids"/>}/>
        <Route path="/product" element={<Product/>}>
          <Route path=':productId' element={<Product/>}/>
        </Route>
        <Route path='/cart' element={<Cart/>}/>
        <Route path='/login' element={<LoginSignup/>}/>
      </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

当我在这里发现类似的问题时，我尝试了多种方法来解决这个问题，但实际上没有任何效果

Answer 1

导入 BrowserRouter 和路由：确保您从“react-router-dom”正确导入 BrowserRouter 和路由。您似乎正确导入了它们，但最好仔细检查一下。

路由配置：确保在您的应用程序组件中正确配置路由。每个 Route 都应该有一个 path 和一个 element prop。 path 属性应该与 URL 路径匹配，而 element 属性应该呈现与该路由关联的组件。

Link 组件：确保您正确使用“react-router-dom”中的 Link 组件。 Link 组件的 to 属性应指定目标 URL 路径。

鉴于您提供的代码，一切看起来都是正确的。但是，您的项目中的其他地方可能存在导致黑屏的问题。

您可以尝试以下一些故障排除步骤：

检查浏览器控制台是否有任何错误消息。这可以让您了解可能导致问题的原因。 验证路由配置是否正确，以及组件路径是否与 App 组件中指定的路由匹配。 检查是否存在任何冲突的 CSS 样式或其他导致渲染问题的组件。 尝试删除该组件并直接渲染您的组件，看看它们是否在不进行路由的情况下正确显示。

当然！让我们检查一下您的代码并确保一切设置正确：

// Navbar.js
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import logo from '../Assets/logo.png';
import cart_icon from '../Assets/cart_icon.png';
import './Navbar.css';

const Navbar = () => {
    const [menu, setMenu] = useState("shop");

    return (
        <div className='navbar'>
            <div className="nav-logo">
                <img src={logo} alt="" />
                <p>Books Store</p>
            </div>
            <ul className="nav-menu">
                <li onClick={() => { setMenu("shop") }}>
                    <Link to='/'>Shop</Link>
                    {menu === "shop" ? <hr /> : null}
                </li>
                <li onClick={() => { setMenu("mens") }}>
                    <Link to='/mens'>Men</Link>
                    {menu === "mens" ? <hr /> : null}
                </li>
                <li onClick={() => { setMenu("womens") }}>
                    <Link to='/womens'>Women</Link>
                    {menu === "womens" ? <hr /> : null}
                </li>
                <li onClick={() => { setMenu("kids") }}>
                    <Link to='/kids'>Kids</Link>
                    {menu === "kids" ? <hr /> : null}
                </li>
            </ul>
            <div className="nav-login-cart">
                <Link to='/login'><button>Login</button></Link>
                <Link to='/cart'><img src={cart_icon} alt="" /></Link>
                <div className="nav-cart-count">0</div>
            </div>
        </div>
    );
};

export default Navbar;

// App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './Components/Navbar';
import ShopCategory from './Pages/ShopCategory';
import Product from './Pages/Product';
import Cart from './Pages/Cart';
import LoginSignup from './Pages/LoginSignup';
import Shop from './Pages/Shop';

const App = () => {
    return (
        <BrowserRouter>
            <Navbar />
            <Routes>
                <Route path='/' element={<Shop />} />
                <Route path='/mens' element={<ShopCategory category="mens" />} />
                <Route path='/womens' element={<ShopCategory category="womens" />} />
                <Route path='/kids' element={<ShopCategory category="kids" />} />
                <Route path="/product/:productId" element={<Product />} />
                <Route path='/cart' element={<Cart />} />
                <Route path='/login' element={<LoginSignup />} />
            </Routes>
        </BrowserRouter>
    );
};

export default App;

确保您的文件结构设置正确，并且组件的路径正确。另外，请确保您的 Navbar.css 文件与 Navbar.js 组件位于同一目录中并且样式正确。

通过此设置，单击导航栏中的链接应该可以正确导航到指定的路线，而不会出现任何渲染问题。