React路由跳转异常：点击Nav.Link无响应，手动输入URL正常

核心问题分析 #

• 组件不在路由上下文内：Menus 组件渲染在 <BrowserRouter> 外部，React Router 无法拦截导航事件，点击链接时浏览器会当作普通锚点处理，不会触发路由跳转。
• 链接格式不匹配路由规则：Nav.Link 的 href 使用了 #Home、#Resources 这类锚点格式，但路由配置的是 /contact、/resources 这类路径，两者不匹配。
• 未使用路由兼容的导航组件：原生 Nav.Link 默认用 HTML 原生 <a> 标签，无法实现单页应用的无刷新跳转，需要配合 React Router 的 Link 组件使用。

具体修复步骤 #

步骤1：将 Menus 移入路由上下文 #

修改 App.js，把 Menus 放到 <BrowserRouter> 内部，让它能访问路由上下文：

import './Site.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import Menus from './Menus';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Contact from './Contact';
import Resources from './Resources';
import PageNotFound from './PageNotFound';

const App = () => {        
    return (
        <BrowserRouter>
            <Menus />
            <div className='mainContentDiv'>      
                <Routes>
                    <Route index element={<Home />}></Route>                                                     
                    <Route path='/contact' element={<Contact />}></Route>
                    <Route path='/resources' element={<Resources />}></Route>
                    <Route path='*' element={<PageNotFound />}></Route>
                </Routes>                    
            </div> 
        </BrowserRouter>            
    );
}

export default App;

步骤2：修改 Menus 中的链接配置 #

引入 React Router 的 Link 组件，让 React-Bootstrap 导航组件使用该组件处理导航：

import { Stack, Button, DropdownButton, Dropdown, Navbar, Nav, Container, NavDropdown } from 'react-bootstrap';
import { Link } from 'react-router-dom'; // 引入Link组件
import dk from './flags/dk.png';
import eng from './flags/eng.png';
import es from './flags/es.png';
import fr from './flags/fr.png';
import de from './flags/de.png';
import se from './flags/se.png';

const Menus = () => {
    const langs = [
        { name: 'English', id: 'eng', iconURL: eng },
        { name: 'Danish', id: 'dk', iconURL: dk },
        { name: 'Swedish', id: 'se', iconURL: se },
        { name: 'French', id: 'fr', iconURL: fr },
        { name: 'Spanish', id: 'es', iconURL: es },
        { name: 'German', id: 'de', iconURL: de }
    ];
    
    const itemAr = [];

    for(let i = 0; i < langs.length; ++i) {        
        itemAr[i] = <NavDropdown.Item as={Link} href='#'>{langs[i].name}<img style={{float: 'right'}} src={langs[i].iconURL} alt='ccc' /></NavDropdown.Item>            
    }

    return(   
        <div className='menuDiv1'>
            <Navbar bg='dark' variant='dark' expand='lg' sticky='top'>
                <Container>
                    <Navbar.Brand as={Link} to='/'>Language Exchange</Navbar.Brand>
                    <Navbar.Toggle aria-controls='basic-navbar-nav' />
                    <Navbar.Collapse id='basic-navbar-nav'>
                    <Nav className='basic-nav-dropdown'>            
                        <div>                                        
                            <Stack direction='horizontal' gap={1}>
                                <Nav.Link as={Link} to='/'><Button variant='light'>Home</Button></Nav.Link>
                                <DropdownButton variant='light' title='Languages'>                                        
                                    {itemAr}
                                </DropdownButton>
                                <Nav.Link as={Link} to='/resources'><Button variant='light'>Resources</Button></Nav.Link>
                                <Nav.Link as={Link} to='/contact'><Button variant='light'>Contact</Button></Nav.Link>                                
                            </Stack>
                        </div>
                    </Nav> 
                    </Navbar.Collapse>                
                </Container>
            </Navbar>            
        </div>
    )
}

export default Menus;

关键修改说明 #

• as={Link}：让 React-Bootstrap 导航组件使用 React Router 的 Link 渲染，替代原生 <a> 标签，实现无刷新跳转。
• to 属性：替代原 href，值对应路由配置中的 path（比如 /resources 对应路由的 path='/resources'）。
• 路由上下文：Menus 移入 <BrowserRouter> 后，能获取路由上下文，Link 才能正常触发路由跳转。

验证效果 #

完成修改后，点击菜单链接即可正常跳转到对应页面，和地址栏直接输入路径的效果一致。

内容的提问来源于stack exchange，提问作者States