reactjs 如何同时使用bootsrap导航栏和浏览器路由器

wkyowqbh  于 2023-02-15  发布在  React
关注(0)|答案(1)|浏览(178)

我是react的新用户,我尝试链接网页,但引导导航,但它不工作。我特灵使用react路由器dom,使不同的网页,使它可以去不同的网页点击,但应用程序不编译,因为浏览器路由器没有被导入。我只是复制粘贴它直接从网站。有人能告诉我错误在哪里,如何修复它吗?它在浏览器上什么也没有显示,但一个空白页![enter image description here] (https://i.stack.imgur.com/lf4Sz.png)这里的图片显示了一些错误,在控制台上,但不在浏览器上
应用程序,js ``

import Home from './Components/Home'
       - import Contact from './Components/Contact'
       - import About from './Components/About'
       - import { BrowserRouter,
       - Routes,Route } from 'react-router-dom'
       -   <BrowserRouter>
       -       <Routes>
       -           <Route  path="/" element={<Home />}>
       -           <Route path="/About" element={<About />} />
       -           <Route path="/ContactUs" element={<Contact />} />
       -         </Route>
       -       </Routes>
       -     </BrowserRouter>
       - 
       - navbar.js
       -   <Navbar expand="lg" >
       -         <Container>
       -         <Navbar.Toggle aria-controls="basic-navbar-nav" />
       -         <Navbar.Collapse id="basic-navbar-nav">
       -           <Nav className="me-auto">
       -             <LinkContainer to='/'>
       -             <Nav.Link >HOME</Nav.Link></LinkContainer>
       -             <LinkContainer><Nav.Link to="/About">ABOUT</Nav.Link></LinkContainer>
       -             <LinkContainer><Nav.Link to="/services">SERVICES</Nav.Link></LinkContainer>
       -             <LinkContainer> <Nav.Link to="/">WRITE</Nav.Link></LinkContainer>
       - 
               
       -           </Nav>
       -           </Navbar.Collapse>
       -         </Container>
       -       </Navbar>`
e5njpo68

e5njpo681#

您需要将导航栏嵌套在BrowseerRouter标记中。例如:

<Header/>
        <BrowserRouter>
            <NavigationBar />
            <Routes>
                <Route path={"/"}></Route>
                <Route path={"/example"}></Route>
            </Routes>
        </BrowserRouter>

相关问题