使用React Router的React-Bootstrap导航栏

Question

我查看了与该主题相关的各种答案，但问题似乎仍然存在。如果有一些具体的解决方案可用，我会非常高兴。

我正在尝试使用React-Bootstrap来呈现导航栏，并尝试使用React-Router进行路由。第一次单击似乎无效。当页面强制刷新时，组件才会加载。

这里是相关的文件。

MyAppNavbar.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Nav, NavDropdown, Navbar, Container, Alert } from "react-bootstrap";
import { Link } from 'react-router-dom';
import Routes from './Routes';

class MyAppNavbar extends Component {

    render() {
        return (
            <React.Fragment>
                <Navbar collapseOnSelect expand="lg" bg="dark" fixed="top" variant="dark" >
                    <Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav activeKey={window.location.pathname} variant="pills">
                            <Nav.Item href="/">
                                <Nav.Link as={Link} to="/" eventKey="/home" title="Home">
                                    Home
                            </Nav.Link>
                            </Nav.Item>
                            <Nav.Item>
                                <Nav.Link as={Link} to="/about" title="About">
                                    About
                            </Nav.Link>
                            </Nav.Item>
                            <Nav.Item>
                                <Nav.Link as={Link} to="/category" eventKey="category" title="Category">
                                    Category
                            </Nav.Link>
                            </Nav.Item>

                            <NavDropdown title="Products" id="nav-dropdown">
                                <NavDropdown.Item>
                                    Basic Pricing
                            </NavDropdown.Item>

                                <NavDropdown.Item>
                                    Corporate
                            </NavDropdown.Item>
                                <NavDropdown.Divider />

                                <NavDropdown.Item> Enterprise pricing
                            </NavDropdown.Item>
                            </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
                <Routes />
            </React.Fragment>
        );
    }
}
export default MyAppNavbar;

Routes.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Category from './Category';
import Products from './Products';
import Home from "./Home";
import About from "./About";
import NotFound from './NotFound'

const Routes = () =>
    <Router>
        <Switch>
            <Route exact path='/'>
                <Home />
            </Route>
            <Route path='/about'>
                <About />
            </Route>
            <Route path='/category'>
                <Category />
            </Route>
            <Route path='/products'>
                <Products />
            </Route>
            <Route >
                <NotFound />
            </Route>
        </Switch>
    </Router>

export default Routes;

App.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Routes from './website/Routes';
import MyAppNavbar from "./website/MyAppNavbar";

const App = () => 
    <React.Fragment>
        <MyAppNavbar />
        <Routes/>
    </React.Fragment>
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>, 
    document.getElementById('root')
);

- CONCON

---

我认为你不需要在 Routes.js 中重新声明 BrowserRouter，因为你已经在 index.js 中这样做了。那么会有任何变化吗？ - lala

我意识到问题所在。这是由于在index.js和app之间重构代码以包装路由器导致的。后来它被删除了。然而，问题仍然存在。 - CONCON

Answer 1

尝试以下修复方法：-

由于您在MyAppNavBar.js中使用了NavLink，因此它需要来自react-router-dom的BrowserRouter才能正常工作。

然后，您可以执行以下操作之一：-

• 修复方法1 - 用BrowserRouter包装App.js中的所有内容或者,
• 修复方法2 - 您可以只是删除Routes.js中的BrowserRouter

您只需要一个BrowserRouter

修复方法1

• 从index.js和Routes.js中删除BrowserRouter

• 添加并将App.js中的所有内容包装在BrowserRouter中

• 'index.js':-

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<App/>, document.getElementById('root')
);

• Routes.js:-

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Category from './Category';
import Products from './Products';
import Home from "./Home";
import About from "./About";
import NotFound from './NotFound'

const Routes = () =>
    <Switch>
      <Route exact path='/'>
        <Home />
      </Route>
      <Route path='/about'>
        <About />
      </Route>
      <Route path='/category'>
        <Category />
      </Route>
      <Route path='/products'>
        <Products />
      </Route>
      <Route >
        <NotFound />
      </Route>
    </Switch>

export default Routes;

• App.js:-

import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import Routes from './website/Routes';
import MyAppNavbar from "./website/MyAppNavbar";

const App = () => 
    <Router>
        <MyAppNavbar />
        <Routes/>
    </Router>
export default App;

修复2

从Routes.js中移除BrowserRouter

• Routes.js:-

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Category from './Category';
import Products from './Products';
import Home from "./Home";
import About from "./About";
import NotFound from './NotFound'

const Routes = () =>
    <Switch>
      <Route exact path='/'>
        <Home />
      </Route>
      <Route path='/about'>
        <About />
      </Route>
      <Route path='/category'>
        <Category />
      </Route>
      <Route path='/products'>
        <Products />
      </Route>
      <Route >
        <NotFound />
      </Route>
    </Switch>

export default Routes;

- lala

---

我遇到了这个错误："在'react-router-dom'中找不到导入为'Switch'的导出项（被导入为'Switch'）"。 - 75ntamas

Answer 2

我遇到了同样的问题，这是我的解决方法: 使用 react-router-bootstrap。

我觉得你应该只修改 MyAppNavbar.js：

首先在 MyAppNavBar.js 顶部导入 react-router-bootstrap 中的 LinkContainer:

import { LinkContainer } from 'react-router-bootstrap';

然后将Nav元素的所有子元素从这个改为：

<Nav.Item href="/">
  <Nav.Link as={Link} to="/" eventKey="/home" title="Home">
    Home
  </Nav.Link>
</Nav.Item>

转换为：

<LinkContainer to="/">
  <Nav.Link>
    Home
  </Nav.Link>
</Nav.Item>

希望它有所帮助。

- 75ntamas