react router dom 학습 중 안되는 부분이 있어 글을 올리게 되었습니다.

React
1

동영상을 보면서 react router dom 를 학습 중입니다.
useParam을 사용하여 url의 파라미터 값에 따라 화면 출력 내용이 변경되는 기능입니다.
Topics함수에서 만들어지는 li 태그를 클릭하면 topic_id 값에 따라
Topic함수에서 내용을 리턴해줍니다.

그런데 li 태그 클릭시 아무 반응이 없습니다.
url를 /topics/1 이 아닌 /topics/topics/1를 타고 들어가야 정상적으로 작동합니다.

영상에서는 React route dom 버전이 6버전 이전으로 알려주고 있지만

전 React route dom 최신버전으로 학습하고 있어 변경된 부분은 검색을 통해

수정해가며 진행 중인데 저 부분에서 막혀서 글을 올리게 되었습니다

어디 부분에서 수정해야 Topic 함수가 정상적으로 반응을 할까요?

function App()
{

  • Topics
    • ... <Route path="/topics/*" element={}> ....

    }

    function Topics() {
    let list = [];
    content.forEach((e) => {
    list.push(


  • <NavLink to={“/topics/” + e.id}>{e.title}

    • );
    });

    return (


    Topics


      {list}


    <Route path=“/topics/:topic_id” element={}>


    );
    }

    function Topic() {
    console.log(1);
    let params = useParams();

    let topic_id = params.topic_id;
    let selected_topic;

    selected_topic = content.find((e) => {
    if (e.id === Number(topic_id)) {
    return e;
    } else {
    return {
    title: “Sorry”,
    description: “Not found”,
    };
    }
    });

    return (


    {selected_topic.title}


    {selected_topic.description}

    );
    }

    2

    코드를 작성해 주실 때, </> 버튼을 누르거나, ``` ```를 입력하고, ```와 ``` 사이, 안에다가 작성해주셨으면 합니다. 코드 파악이 전혀 불가능합니다.

    게시글 및 댓글 작성 시 문법은 마크다운이기 때문에 HTML 형식이 끼어있으면 태그로 치환되어버립니다.
    예를들어 코드 블럭 밖에다가 ul>li 목록을 쓰면 아래처럼 됩니다.

    • Hello
    • Markdown

    코드 불럭 안에 쓰면 어떤 코드를 쓰든 글자를 날것으로 처리합니다.

    const StaticUnorderdList = (listitems:string[]) => {
  return (
   <ul>
     {listitems.map({item,index}=><li key={index}>{item}</li>)}
   </ul>
  )
}

    언어별 코드 하이라이팅이 필요하다면 여는 ``` 뒤에 언어명을 작성해주면 됩니다.

    예: ```js
    const message = “Hello World”;
    document.body.innerHTML = message;
    ```

    결과:

      const message = "Hello World";
  document.body.innerHTML = message;
    1개의 좋아요
    3

    해결 되셨으려나 모르겠지만,

    <Route path="주소/:topic_id" element={<컴포넌트/>}>
    :topic_id
    콜론을 포함한 파라미터값이 있어야 이 경로에 들어왔을때 params로 path 값을 뽑아올 수 있습니다.

    Topics 컴포넌트에서
    let params = useParams() 바로 밑에서
    console.log(params)

    해보시면 Route에 설정해둔 파라미터가 객체형태로 보이면 받아진거에요. :slight_smile: