[공유노트] React Router dom - useLocation

 

프로젝트 페이지 파일구조

 

페이지마다 다른 스타일의 Header 컴포넌트를 보여주고 싶은 경우

• Home 페이지

• New, ViewPage, NotFound 페이지

---

01. React Router dom - useLocation

Link 태그에 current={location.pathname !== "/"} 속성을 추가한다.

useLocation : url 정보 가져오는 함수
pathname : 이동할 페이지 주소

// Header.js
import { Link, useLocation } from "react-router-dom";

...

export const Header = () => {
  const location = useLocation();
  // console.log(location);
  return (
    <HeaderCont>
      <HeaderWrap>
        <BtnLink to="/" current={location.pathname !== "/"}>
          <ArrowLeft />
        </BtnLink>
        <Title>공유노트</Title>
      </HeaderWrap>
      <NextBtn />
    </HeaderCont>
  );
};

console.log(location); 

console을 찍어보면 pathname에서 현재 경로를 확인할 수 있다.

 

 

1) Prev 버튼을 home 페이지를 제외한 모든 페이지에서 나타나게 하는 방법

•  true일 때만 display 속성을 줌

// Header.js
<BtnLink to="/" current={location.pathname !== "/"}>
  <ArrowLeft />
</BtnLink>

const BtnLink = styled(Link)`
  /* display: ${(props) => (props.current ? "block" : "none")}; */
  ${(props) => (props.current ? `display: block;` : `display: none;`)}
  margin-left: 1rem;
`;

 

2) 글쓰기 버튼을 home 경로에서만 나타나게 하는 방법

// NextBtn.js
const NextBtn = () => {
  const location = useLocation();
  // console.log(location.pathname === "/");
  return (
    <Button to="/new" current={location.pathname === "/"}>
      <EditIcon />
      <BtnText>글쓰기</BtnText>
    </Button>
  );
};

 

console.log(location.pathname === "/")

const Button = styled(Link)`
  display: ${(props) => (props.current ? "flex" : "none")};
  align-items: center;
  ...
`;

😭

하지만....... 에러 메시지가 뜬다.

 

불리언 타입이 아닌 속성에 true 값을 받아들였다는 것이라,

값을 string 형태("true") 로 제공하라는 에러이다.

 

아래 코드로 수정하여 에러 해결함.

<BtnLink to="/" current={location.pathname !== "/" ? 1 : 0}>

 

02. Route

// App.js
import “./App.css”;
import { useState, useRef } from “react”;
import { BrowserRouter, Routes, Route } from “react-router-dom”;

import { Home, NotFound, New, Splash, ViewPage } from “./pages”;
import { Footer, Header } from “./components”;
import NextBtn from “./elements/NextBtn”;
// import Next from “./elements/Next”;

function App() {
  const [data, setData] = useState([]);

  const dataId = useRef(0);

  const onCreate = (author, title, category, url, content) => {
    const created_date = new Date().getTime();
    const newItem = {
      id: dataId.current,
      author,
      title,
      category,
      url,
      content,
      created_date,
    };
    dataId.current += 1;
    setData([newItem, ...data]);
  };

  return (
    <BrowserRouter>
      <div className=“App”>
        {/* 성능을 잡아야 함 */}
        {/* {window.location.pathname === “/“ ? <Header /> : null} */}
        <Routes>
          <Route
            path=“/“
            element={
              <div>
                <Header width=“15” height=“20”></Header>
                <Footer />
              </div>
            }
          />
          <Route
            path=“/new”
            element={
              <div>
                <Header />
                <Footer />
              </div>
            }
          />
          <Route
            path=“/view”
            element={
              <div>
                <Header />
                <Footer />
              </div>
            }
          />
          <Route
            path=“*”
            element={
              <div>
                <Header />
                <Footer />
              </div>
            }
          />
        </Routes>
        <Routes>
          <Route path=“/“ element={<Home dataList={data} />} />
          <Route path=“/new” element={<New onCreate={onCreate} />} />
          <Route path=“/view” element={<ViewPage dataList={data} />} />
          <Route path=“/splash” element={<Splash />} />
          <Route path=“*” element={<NotFound />} />
        </Routes>
        {/* {window.location.pathname === “/“ ? <Footer /> : null} */}
      </div>
    </BrowserRouter>
  );
}

export default App;

 

03. window.location.pathname

const location = useLocation();

{window.location.pathname === “/“ ? <Header /> : null} 

문제점 : 페이지가 바뀔 때 마다 렌더링이 안되는 문제

return (
    <BrowserRouter>
      <div className="App">
        {/* <Header /> */}
        {window.location.pathname === "/" ? <Header /> : null}
        {window.location.pathname === "/new" ? <Header /> : null}
        <div className="ContentInner">
          <Routes>
            <Route path="/" element={<Home dataList={data} />} />
            <Route path="/new" element={<New onCreate={onCreate} />} />
            <Route path="/view" element={<ViewPage dataList={data} />} />
            <Route path="/splash" element={<Splash />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </div>
        <Footer />
        {CommonFunc()}
      </div>
    </BrowserRouter>
  );
}

export const Header = () => {
  const location = useLocation();
  return (
    <HeaderCont>
      <HeaderWrap>
        <BtnLink to="/" current={location.pathname !== "/"}>
          <ArrowLeft />
        </BtnLink>
        <Title>공유노트</Title>
      </HeaderWrap>
      {window.location.pathname === "/" ? <Header /> : null}
    </HeaderCont>
  );
};

 

참고

https://mygumi.tistory.com/382

Warning Received `true` for non-boolean attribute :: 마이구미

https://stackoverflow.com/questions/49784294/warning-received-false-for-a-non-boolean-attribute-how-do-i-pass-a-boolean-f

Warning: Received `false` for a non-boolean attribute. How do I pass a boolean for a custom boolean attribute?