URL을 업데이트하지만 페이지를 새로 고치지 않는 React Router V5

Question

반응 라우터는 뷰를 업데이트하지 않지만 URL을 변경합니다.

Navbar.js :

import React from "react";
import logo from "../Assets/imgs/Logo/WHITELOGOkatman 1.png";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
class Navbar extends React.Component {
  render() {
    return (
      <div className="header">
        <img className="logo" src={logo} alt="logo" />
        <Router>
          <nav>
            <ul className="nav_links">
              <Link to="/">
                <li>Home</li>
              </Link>
              <Link to="/process">
                <li>Process</li>
              </Link>
              <Link to="/career">
                <li>Career</li>
              </Link>
              <Link to="/about">
                <li>About</li>
              </Link>
            </ul>
          </nav>
        </Router>
      </div>
    );
  }
}
export default Navbar;

그리고 이것은 내 App.js입니다.

import React from "react";
import "./App.css";
import "./Components/Styles/style.css";
import "bootstrap/dist/css/bootstrap.css";
import Navbar from "./Components/Navbar";
import About from "./Components/About";
import Home from "./Components/Home";
import Career from "./Components/Career";
import Footer from "./Components/Footer";
import notFoundPage from "./Components/404";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <Navbar />
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/career" component={Career} />
          <Route path="/notfound" component={notFoundPage} />
        </Switch>
      </Router>
      <Footer />
    </div>
  );
}

export default App;

내가 시도한 것 :

1. withRouter를 사용하여 라우터 내부에서 렌더링중인 모든 구성 요소를 내보내려고했습니다. 여전히 페이지가 다시로드되지 않았습니다.
2. 라우터 구성 요소를 최상위 구성 요소로 만들려고 시도했지만 작동하지 않았습니다.
3. 나는 li 항목을 링크로 만들려고 시도했지만 내가 원하는 것을하지 못했습니다.
4. 링크 태그 위에 스위치를 포함하고 라우터 태그에서 스위치를 제거하는 것과 같은 해결책을 시도했지만 여전히 아무것도 작동하지 않았습니다.
5. 나는 또한 경로의 끝에서 집을 만들기 위해 경로의 순서를 바꾸려고 시도했습니다. 여전히 아무것도.

Answer 1

다음 두 가지를 시도하십시오.

• 먼저 경로 순서가 다음과 같은지 확인하십시오.

<Switch>
  <Route path="/about" component={About} />
  <Route path="/career" component={Career} />
  <Route path="/notfound" component={notFoundPage} />
  <Route exact path="/" component={Home} />
</Switch>

• 제거 <Router>하여 내부에 <Nav>내부와 랩 모두 <App>와 <Router>...이 같이 :

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/career" component={Career} />
            <Route path="/notfound" component={notFoundPage} />
          </Switch>
        <Footer />
      </div>
    </Router>
  );
}

내 경험상 <Router>1 명의 아이 만 기대 한다는 것을 깨달았다는 점은 주목할 가치가 있다고 생각합니다 . 그래서 귀하의 경우에는 <Router>두 번 사용 했습니다.

---

<Router>index.js 파일 에 넣어서 더 단순화하고 싶을 수도 있습니다 .

ReactDOM.render(
   <Router>
      <App />
   </Router>,
   containerElement
);