无法在简单的导航标签内使用反应路由器链接

Question

import React from 'react'
import logo from './img/logo1.png'
import { Link } from 'react-router-dom'

export default function Navbar() {
    return (
        <div>
 
            {/* theme switch and login signup */}
            <div className="border-2 border-blue-600 h-full">
                <Link to="/">Home</Link>
            </div>
        </div>
    )
}

我一开始尝试环绕一个普通的 div 或一个部分，但没有得到输出。这是一个完全空白的白屏。我以前做过 Link 项目，但这是我第一次遇到这个问题。我也禁用了反应安全模式。我到底应该做什么？

Answer 1

import React from 'react';
import logo from './img/logo1.png';
import { Link, BrowserRouter as Router } from 'react-router-dom'; // Import BrowserRouter

export default function Navbar() {
    return (
        <Router> {/* Wrap your Link components inside Router */}
            <div>
                {/* theme switch and login signup */}
                <div className="border-2 border-blue-600 h-full">
                    <Link to="/">Home</Link>
                </div>
            </div>
        </Router> {/* Close Router */}
    );
}