React NavLink\'s open to blank page，需要重新加载才能加载内容答案

【问题标题】：React NavLink's open to blank page, need reload to load contentReact NavLink\'s open to blank page，需要重新加载才能加载内容
【发布时间】：2022-10-13 02:26:20
【问题描述】：

尝试加载到我网站上的新页面时遇到问题。单击链接时，网址将更改为新地址，但页面将只有空白，直到手动重新加载。我正在使用 react.js 和 React Routers v6。

index.js：

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <BrowserRouter>
    <App />
    </BrowserRouter>
)

应用程序.js：

import './App.scss'
import {  Routes, Route } from 'react-router-dom'
import Layout from './components/Layout'
import Home from './components/Home'
import About from './components/About'
import Contact from './components/Contact'
import Portfolio from './components/Portfolio'
import Sidebar from './components/Sidebar'

function App() {
  return (
    <div>
      <Sidebar />
      <Routes>
        <Route exact path="/" element={< Layout />}>
        <Route exact index element={ < Home />}/>
        <Route exact path="about" element={< About />}/>
        <Route exact path="/contact" element={< Contact />}/>
        <Route exact path="/portfolio" element={< Portfolio />}/>
        </Route>
      </Routes>
    </div>
  );
  }

export default App

侧边栏：

import './index.scss'
import {  NavLink } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {faHome, faUser, faEnvelope, faSuitcase} from '@fortawesome/free-solid-svg-icons'
import { faLinkedin, faBehanceSquare } from '@fortawesome/free-brands-svg-icons'



const Sidebar = () => (

    <div className = 'nav-bar'>
        
        <nav>
            <NavLink end activeclassname = "active" to="/">
            <FontAwesomeIcon icon={faHome} color="#4d4d4e" />
            </NavLink>
            <NavLink exact="true" activeclassname="active" className = "about-link" to="about">
            <FontAwesomeIcon icon={faUser} color="#4d4d4e" />
            </NavLink>
            <NavLink exact="true" activeclassname="active" className = "portfolio-link" to="portfolio">
            <FontAwesomeIcon icon={faSuitcase} color="#4d4d4e" />
            </NavLink>
            <NavLink exact="true" activeclassname="active" className = "contact-link" to="contact">
            <FontAwesomeIcon icon={faEnvelope} color="#4d4d4e" />
            </NavLink>
        </nav>
        <ul> 
            <li>
                <a target="-blank" rel='noreferrer' href="https://www.linkedin.com/in/braden-mcgee/">
                    <FontAwesomeIcon icon={faLinkedin} color="#4d4d4e"/>
                </a>
                <a target="-blank" rel='noreferrer' href="https://www.behance.net/bradenrmcgee">
                    <FontAwesomeIcon icon={faBehanceSquare} color="#4d4d4e"/>
                </a>
            </li>
        </ul>
    </div>
)

export default Sidebar

我曾尝试在 NavLink 标记中使用 onClick 函数手动加载页面，但是在加载到正确的页面之前，我必须单击导航两次。任何帮助表示赞赏！

【问题讨论】：

我没有看到路线或链接有任何明显的问题。有没有错误？认为你可以创建一个跑步[codesandbox[(codesandbox.io) 演示重现了我们可以现场检查的问题？

标签： javascript reactjs react-router-dom

【解决方案1】：

在您的 App.js 中更改路线。希望它会奏效。

function App() {
  return (
    <div>
      <Sidebar />
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/home" element={<Home/>} />
        <Route path="/about" element={<About />} />
        <Route path="/login" element={<PortFolio />} />
      </Routes>
    </div>
  );
  }

export default App

【讨论】：

【解决方案2】：

我想到了！结果我找错地方了。路线没问题并且工作正常，但是我使用 useEffect 钩子错误地为页面上的标题设置动画。

最初，我有：

useEffect(() => {
    return setTimeout(() => {
    setLetterClass('text-animate-hover')
    }, 3000);
}, []);

当我单击导航时，它会创建空白页面。发生这种情况是因为我返回的不是函数，导致 useEffect 挂钩失败。所以，一旦我删除了 useEffect 的返回，就把它变成这样：

useEffect(() => {
    setTimeout(() => {
    setLetterClass('text-animate-hover')
    }, 3000);
}, []);

导航和网站开始工作。

【讨论】：