reactjs - 带有 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;

路由.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;

索引.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')
);

Answer 1

尝试这些修复:-

由于您在 MyAppNavBar.js 中使用了 NavLink，因此它需要来自 react-router-dom 的 BrowserRouter > 发挥作用。

然后你可以这样做:-

• 修复 1 - 使用 BrowserRouter 或 包装 App.js 中的所有内容，
• 修复 2 - 您可以在 Routes.js
中 删除 BrowserRouter

无论如何你只需要一个BrowserRouter

修复 1

• 从 index.js 和 Routes.js

  中删除 BrowserRouter

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

• '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;