将h5封装在链接标签中使h5消失

Question

我正在尝试使一个组件转到本地主机:3000/秒。当我没有将组件(AddNote)包装在链接标记中时，它的标题就会显示出来，但是当我这样做时，整个页面就变成了空白，包括默认情况下应该显示的“becomes”。

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文档 --它将更详细地解释它！