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

Question

我只是想得到 React-Boostrap和 React-Router一起运行。我用过 创建 React 应用 创建一个简单的外壳。

这是我的代码，它可以很好地与 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 路由器。没有发生这种完全重新加载。似乎只有在使用 React-Boostrap 时才会发生导航链接

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

任何人对这个有任何想法吗？

Answer 1

Nav.Link将默认刷新页面(与 href 功能相同)。
你需要把它改成<Nav.Link as={Link} to="/">而不是 <Nav.Link href="/">修复链接来自 react-router-dom 的相同问题