전체 페이지를 다시 로드하도록 재조정 및 재조정

전체 페이지를 다시 로드하도록 재조정 및 재조정

나는 단지 얻으려고 노력하고 있다.React-Boostrap그리고React-Router함께 달리고 있다.나는 간단한 셸을 만들기 위해 Create 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-Boostrap네비게이션

이게 정상인지 아는 사람 있어?React-Boostrap nav리액션-루터와 함께 사용할 경우 이 작업을 수행하십시오.내 생각엔 인빌트 제품을 사용하지 않기 때문에 가능한 것 같아.React-Router Link클래스, 그러나 자체 Nav 기반 항목.

이거에 대해 생각나는 사람 있어?

그Nav.Link기본적으로 페이지를 새로 고침(기능을 href로 변경)
로 바꿔야 한다.<Nav.Link as={Link} to="/">대신에<Nav.Link href="/">링크가 react-router-dom에서 온 것과 동일한 위치를 수정한다.

참조URL: https://stackoverflow.com/questions/59530374/react-boostrap-and-react-router-causing-full-page-reload