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和来自react-router的一些Link。不会发生完全重新加载。仅在使用React-Boostrap导航链接时出现这种情况

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

有人对此有任何想法吗？

Answer 1

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

的问题。

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

1 个答案: