在 Link 标签中包装 h5 使 h5 消失

Question

我正在尝试让组件达到 localhost:3000/秒。当我不将组件（AddNote）包装在 Link 标签中时，组件（AddNote）的 header 显示，但是当我这样做时，整个页面变为空白，包括应该显示的“我的笔记”默认情况下。

import React, {useState} from 'react';
import './App.css';
import {BrowserRouter as Router, Routes, Route, Switch} from 'react-router-dom';
import AddNote from './components/noteDisplay/addNote/newNote.js'
import FirstPage from './components/noteDisplay/firstPage.js'
import NoteDisplay from './components/noteDisplay/noteDisplay.js'
import secondPage from './components/secondPage/secondContainer.js'
const App = () => {

  return (
      
        <div className="App">
          
          <h1 className="app-title">My notes</h1>
          
          <Router>
            <div>
              <Routes>

                <Route path='/second' element={<secondPage />}/>
                {/*<Route path='/' element={<NoteDisplay/>}/>*/}

              </Routes>
              
            </div>

          </Router>
          <AddNote/>
          
        </div> 
        


  );
}

import React from 'react';
import { Route, BrowserRouter as Router, Link, Switch } from 'react-router-dom';
import NoteDisplay from '../noteDisplay';
import { v4 as uuidv4 } from 'uuid';


const AddNote = () => {
    console.log('hi')
    return (
        <div>
            <Link to="/second">
                <h5 className="add-note">New note</h5>
            </Link>  
        </div>
        



    )

}
export default AddNote;

Answer 1

您需要将 <Link /> 代码更改为如下所示。

const AddNote = () => {
  return (
    <div>
      <h5>
        <Link href="/second">New Note</Link>
      </h5>
    </div>
  );
};

查看官方 Next.js documentation 了解如何使用它 - 它解释得更详细！

在 Link 标签中包装 h5 使 h5 消失

Wrapping h5 in Link tag made h5 dissappear

html

reactjs

react-router-dom