React-BootStrap Nav Link
BootStrap Nav 링크에 React-Router-Dom NavLink 적용하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import React from 'react';
import { Navbar, Container } from 'react-bootstrap';
const NavBarElement = () => {
return (
<Navbar collapseOnSelect expand='lg' bg='dark' variant='dark'>
<Container>
<Navbar.Brand href='/'>React-Bootstrap</Navbar.Brand>
</Container>
</Navbar>
);
};
export default NavBarElement;
|
이런식으로 부트스랩에서 제공하는 컴포넌트로 nav를 작성하면 href 가 기본적으로 되어 있는데
이걸 to='/' 이런식으로 바꾸면 제대로 작동하지가 않는다
그렇다고 href에 주소를 그냥 작성하면 새로고침이 일어나게 된다
방법 1
그냥 react-router-dom의 navlink를 사용하고 클래스로 bootstrap을 적용하는 것
그럼 페이지를 이동해도 새로고침이 일어나지 않는다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import { NavLink } from 'react-router-dom';
import { Navbar, Container } from 'react-bootstrap';
const NavBarElement = () => {
return (
<Navbar collapseOnSelect expand='lg' bg='dark' variant='dark'>
<Container>
<NavLink className='navbar-brand' to='/'>
React-Bootstrap
</NavLink>
</Container>
</Navbar>
);
};
export default NavBarElement;
|
방법 2
as 를 통해 NavLink를 상속 받는것
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { NavLink } from 'react-router-dom';
import { Navbar, Container } from 'react-bootstrap';
const NavBarElement = () => {
return (
<Navbar collapseOnSelect expand='lg' bg='dark' variant='dark'>
<Container>
<Navbar.Brand as={NavLink} to='/'>
React-Bootstrap
</Navbar.Brand>
</Container>
</Navbar>
);
};
|