时间戳

首页 > 解决方案 > 单击nabber链接时React BrowserRouter不呈现

reactjs - 单击nabber链接时React BrowserRouter不呈现

问题描述

我正在使用 BrowerRouter 为我的项目设置导航，除了我希望组件自行打开而不是我的应用程序组件中的其他所有内容之外，我几乎可以正常工作......有没有办法做到这一点？现在，当我单击导航栏按钮并打开一个我想要的新选项卡时，一切正常，但主应用程序中的所有其他组件也会呈现我不想要的。我正在努力做到这一点，以便当您按下其中一个 nabber 链接按钮时，它会打开一个新选项卡，其中只有组件中的内容，而不是主应用程序组件中的任何其他内容。

这是导航栏组件：

import React from 'react'
import './navbar.css'
import { Link } from 'react-router-dom'
import {BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import HOME_PAGE from './pages/HOME_PAGE.js'
import ABOUT_PAGE from './pages/ABOUT_PAGE'
import CONTACT_PAGE from './pages/CONTACT_PAGE.js'

export default function NAVBAR() {

    function hamburgerMenuClick(){
        const navbarLinks = document.querySelector('.navbar-links')
        navbarLinks.classList.toggle('active')
    }

    return (
        <>
        <nav className = "navbar">
            <div className = "logo">Logo</div>
            <a href="#" className = "toggle-button" onClick = {hamburgerMenuClick}>
                <span className = "bar"></span>
                <span className = "bar"></span>
                <span className = "bar"></span>
            </a>
            <div className = "navbar-links">
                <ul>
                    <Link to = "/pages/HOME_PAGE.js"><li><a >Home</a></li></Link>
                    <Link to = "/pages/ABOUT_PAGE.js"><li><a >About</a></li></Link>
                    <Link to = "/pages/CONTACT_PAGE.js"><li><a >Contact</a></li></Link>
                    </li>
                </ul>
            </div>
        </nav>
        <Router>
            <Route exact path = "/pages/HOME_PAGE.js" component = {HOME_PAGE}/>
            <Route exact path = "/pages/ABOUT_PAGE.js" component = {ABOUT_PAGE}/>
            <Route exact path = "/pages/CONTACT_PAGE.js" component = {CONTACT_PAGE}/>
        </Router>
        </>
    )
}

标签： reactjsjsx

解决方案

你应该使用开关

<Router>
    <Switch>
          <Route exact path = "/pages/HOME_PAGE.js" component ={HOME_PAGE}/>
          <Route exact path = "/pages/ABOUT_PAGE.js" component = {ABOUT_PAGE}/>
          <Route exact path = "/pages/CONTACT_PAGE.js" component = {CONTACT_PAGE}/>
     </Switch>
 </Router>

推荐阅读