react-boostrap 和 react-router 导致整页重新加载

Question

我只是想React-Boostrap和React-Router并在一起运行。我使用Create React App创建了一个简单的 shell。

这是我的代码，它与实际工作很好 React Router

    import React, { Component } from "react";
    import { RouteComponentProps, useHistory } from 'react-router';
    import {
        BrowserRouter as Router,
        Switch,
        Route,
        useParams,
        BrowserRouter
    } from "react-router-dom";


    import 'bootstrap/dist/css/bootstrap.min.css';
    import {
        Nav,
        Navbar
    } from "react-bootstrap";


    function Navigation() {

        return (
            <BrowserRouter >
                <div>
                    <Navbar bg="light" expand="lg">
                        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav">
                            <Nav className="mr-auto">
                                <Nav.Link href="/">Home</Nav.Link>
                                <Nav.Link href="/about">About</Nav.Link>
                                <Nav.Link href="/users/1">/users/1</Nav.Link>
                                <Nav.Link href="/users/2">/users/2</Nav.Link>
                                <Nav.Link href="/users2/1">/users2/1</Nav.Link>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>

                    {/* A <Switch> looks through its children <Route>s and
                        renders the first one that matches the current URL. */}
                    <Switch>
                        <Route path="/about">
                            <About />
                        </Route>
                        <Route path="/users/:id" render={() => <Users />}/>
                        <Route path="/users2/:id" component={Users2} />
                        <Route path="/">
                            <Home />
                        </Route>
                    </Switch>
                </div>
            </BrowserRouter >
        );
    }


    class AppRouterBootstrap extends Component {
        render() {
            return (
                <div id="App">
                    <Navigation />
                </div>
            );
        }
    }

    export default AppRouterBootstrap;

    function Home() {
        return <h2>Home</h2>;
    }

    function About() {
        return <h2>About</h2>;
    }

    function Users() {
        // We can use the `useParams` hook here to access
        // the dynamic pieces of the URL.
        let { id } = useParams();
        let history = useHistory();

        const handleClick = () => {
            history.push("/home");
        };

        return (
            <div>
                <h3>ID: {id}</h3>
                <button type="button" onClick={handleClick}>Go home</button>
            </div>
        );
    }


    class Users2 extends React.Component<RouteComponentProps, any> {

        constructor(props: any) {
            super(props);
        }

        render() {
            return (
                <div>
                    <h1>Hello {(this.props.match.params as any).id}!</h1 >
                    <button
                        type='button'
                        onClick={() => { this.props.history.push('/users/1') }} >
                        Go to users/1
                    </button>
                </div>
            );
        }
    }

渲染时看起来像这样。看起来不错，实际上可以工作（从导航和参数等角度来看就好了）

但是我注意到的是，每当我单击其中一个React-Boostrap nav链接时，如果我监视“网络”选项卡，就会发生完整的网络重新加载。如果我不使用React-Boostrap nav，而是使用一个简单的react-router和一些Link来自 react-router 的。没有发生这种完全重新加载。它似乎只在使用React-Boostrap导航链接时发生

有谁知道这是否正常，React-Boostrap nav当与 React-Router 一起使用时应该这样做。我想这是可能的，因为它不使用内置React-Router Link类，而是使用它自己的基于导航的项目。

有没有人对此有任何想法？

Answer 1

在Nav.Link将刷新默认的页面（相同的功能A HREF）。
您需要将其更改为<Nav.Link as={Link} to="/">而不是<Nav.Link href="/">修复链接来自 react-router-dom 的相同位置