페이지 렌더링 문제를 유발하는 대응j 라우팅

페이지 렌더링 문제를 유발하는 대응j 라우팅

App.js는 다음과 같다.

function App() {
  return (
    <div className="App">
    <Header></Header>
    <HomePage></HomePage>             
    </div>
  );
}

웹사이트에 접속하는 사람은 누구나 기본적으로 홈페이지를 먼저 보아야 한다.

다음과 같은 라우팅 정보가 포함된 탐색 메뉴가 있다.

<Router>
<Switch>                                                
    <Route path='/login' component={Authentication} />                                              
</Switch>
</Router>

로그인 메뉴 링크를 클릭하면 인증 페이지가 로드되지만 브라우저에서 아래로 스크롤하면 아래 홈페이지도 볼 수 있다.라우터에서 참조하는 페이지만 로드하려면 어떻게 해야 하는가?

해결책:

라우터에 다음 라우트 추가

<Route exact path='/' component={Home} />

다른 경로:Route다른 페이지 표시(구성 요소 속성:Route() 여기 데모와 리액션 처리 문서가 도움이 될 수 있다.행운을 빈다!

• react-reason-v4-reason
• 라우터 문서 대응

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* 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">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

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

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

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

다음과 같이 경로 섹션에 "정확한 경로" 키워드를 추가하십시오.<Route exact path="/" component={Home} />"정확한"을 사용하지 않으면 경로에 "/"가 포함된 모든 구성요소를 렌더링할 것이다.

이 문제에 대해 정확하게 사용하십시오.

    <Route exact path="/">
        <Home />
    </Route>

참조URL: https://stackoverflow.com/questions/63293111/reactjs-routing-causing-page-render-issues