在链接标签中包装 h5 使 h5 消失答案

【问题标题】：Wrapping h5 in Link tag made h5 dissappear在链接标签中包装 h5 使 h5 消失
【发布时间】：2022-03-26 09:31:59
【问题描述】：

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

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;

【问题讨论】：

请拨打tour 了解当人们回答您的问题时如何跟进。我看到您发布了许多问题，却没有在应得的地方给出信用。
如果您不打算解决此帖子，请将其删除。被遗弃的帖子很难看。

标签： html reactjs react-router-dom

【解决方案1】：

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

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

使用方法见官方Next.js documentation - 里面有更详细的解释！

【讨论】：