React Router 리액트 라우터3 { Link }

Q. { Link }를 이용하여, 각 단어를 클릭하면 "/", "/Article", "/Contact"로 이동되도록 변경해보자.

import './App.scss';

function App() {
  return (
    <div className="App">
      Home
      Article
      Contact
    </div>
  );
}

export default App;

1. { Link }를 import 선언한다.

import { Link } from 'react-router-dom';

2. <Link to="경로"></Link>로 감싼다.

<Link to="/">Home</Link>

3. HTML 결과

<a href="/">Home</a>

---

import './App.scss';
import { Link } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Link to="/">Home</Link>
      <Link to="/Article">Article</Link>
      <Link to="/Contact">Contact</Link>
    </div>
  );
}

export default App;

---

부트스크랩에서 아래와 같이 사용해보니, 콘솔의 다음의 경고가 뜬다.

<Nav.Link><Link to="/"> Home </Link></Nav.Link>

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

이는 <a>태그 안에 <a>태그가 있으니 확인하라는 메시지로 다음과 같이 고쳐주면 된다.

<Nav.Link as={Link} to="/"> Home </Nav.Link>

"as"는 react-bootstrap 문법으로 <Link>와 같이 사용하겠다는 뜻이다. <a>태그 대신 사용할 HTML 태그 혹은 컴포넌트에 삽입 할 수 있다.

 

bootstrap 연결 방법