React - JSX / JS 링크로 라우팅 이동하기

* 그냥 스터디 인증겸 기록용 

 

- JSX 링크로 라우팅 이동하기(1) 

 : Link 사용

 

- links.jsx

import {Link} from "react-router-dom"

export default function Links(){
    return (
        <ul>
            <li>
                <Link to ="/">Home</Link>
            </li>
            <li>
                <Link to ="/profile">profile</Link>
            </li>
            <li>
                <Link to ="/profile/1">profile/1</Link>
            </li>
            <li>
                <Link to ="/about">about</Link>
            </li>
            <li>
                <Link to ="/about?name=mark">about?name=mark</Link>
            </li>
        </ul>
    )
}

 

- app.js

import './App.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from "./pages/Home"
import Profile from './pages/Profile';
import About from './pages/About';
import NotFound from './pages/NotFound';
import Links from './components/Links';

function App() {
  return (
    
    <BrowserRouter>
      <Links ></Links>
      <Switch>
        <Route path="/profile/:id" component={Profile}></Route>
        <Route path="/profile" component={Profile}></Route>
        <Route path="/about" component={About}></Route>
        <Route path="/" exact component={Home}></Route>
        <Route component={NotFound}/>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

 -> <a href~/> 와 다르게 로딩이 진행되지 않음

 

-  NavLink 링크로 라우팅 이동하기(2) 

 : NavLink 사용

 

• activeClassName, activeStyle처럼 active 상태에 대한 스타일 지정이 가능함
• ex)활성화 상태에서 색상변경
• route의 path처럼 동작하기 때문에 exact가 있음

import {NavLink} from "react-router-dom";

const activeStyle = {color: "green"};
export default function NavLinks(){
    return (
        <ul>
            <li>
                <NavLink to ="/" exact activeStyle = {activeStyle}>Home</NavLink>
            </li>
            <li>
                <NavLink to ="/profile" activeStyle = {activeStyle}>profile</NavLink>
            </li>
            <li>
                <NavLink to ="/profile/1">profile/1</NavLink>
            </li>
            <li>
                <NavLink to ="/about">about</NavLink>
            </li>
            <li>
                <NavLink to ="/about?name=mark">about?name=mark</NavLink>
            </li>
        </ul>
    )
}

activestyle 지정

 

import {NavLink} from "react-router-dom";

const activeStyle = {color: "green"};
export default function NavLinks(){
    return (
        <ul>
            <li>
                <NavLink to ="/" exact activeStyle = {activeStyle}>Home</NavLink>
            </li>
            <li>
                <NavLink to ="/profile" activeStyle = {activeStyle}>profile</NavLink>
            </li>
            <li>
                <NavLink to ="/profile/1">profile/1</NavLink>
            </li>
            <li>
                <NavLink
                to ="/about" 
                activeStyle = {activeStyle} 
                isActive={(match, location) => {
                    console.log(location);
                    return location.search == "";
                }}>
                about</NavLink>
            </li>
            <li>
                <NavLink to ="/about?name=mark"
                activeStyle = {activeStyle} 
                isActive={(match, location) => {
                    console.log(location);
                    return location.search == "?name=mark";
                }}
                >about?name=mark</NavLink>
            </li>
        </ul>
    )
}

 

- JS로 라우팅 이동하기 

 :

-loginbutton.jsx

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

export default withRouter(function LoginButton(props){
    console.log(props);
    function login(){
        setTimeout(() => {
            props.history.push("/");
        },1000);
    }
    return <button onClick ={login}>login</button>
});

- login.jsx

import LoginButton from "../components/LoginButton";

export default function Login(){  
    return <div>
        <h2>login page</h2>
        <LoginButton ></LoginButton>
    </div>
}

button click 시, 홈으로 이동