>source

저는 현재 react 사용을 좀 더 잘하기 위해 개인 프로젝트를 진행 중입니다.

탐색을 위해 react-router를 사용합니다. 내 index.js 파일에는 다음이 있습니다.

import { render } from "react-dom";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import TukTukTours from "./components/TukTukTours";
import BycicleTours from "./components/BicycleTours";
import WalkingTours from "./components/WalkingTours";
const rootElement= document.getElementById("root");
render(
  <BrowserRouter>     <Routes>        <Route path="/" element={<App />} />        <Route path='tuktuktours' element={<TukTukTours/>}/>        <Route path='bycicletours' element={<BycicleTours/>}/>        <Route path='walkingtours' element={<WalkingTours/>}/>    </Routes>  </BrowserRouter>,
  rootElement
);

앱 구성 요소는 기본적으로 기본 페이지를 로드하는 것입니다. 두 언어 간에 변경되는 선택 상자가 있는 탐색 모음이 있습니다. 사용자가 페이지의 모든 텍스트를 변경하면 한 언어에서 다른 언어로 변경됩니다. 다른 세 페이지(위의 경로)에서도 동일한 일이 발생하기를 원합니다.

이를 위해 상태 변수를 App, WalkingTours, BycicleTours 및 TukTukTours에 전달하여 페이지 콘텐츠를 동적으로 변경하고 싶습니다.

index.js를 구조화한 방식은 사용할 수 없는 것 같습니다.사용 상태내가 원하는 것을 달성하기 위해 후크. 아래와 비슷한 것;

import { render } from "react-dom";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import TukTukTours from "./components/TukTukTours";
import BycicleTours from "./components/BicycleTours";
import WalkingTours from "./components/WalkingTours";
import { useState } from "react";
const [language, setLanguage]= useState("GB");
const changeLanguage= (language)=> setLang(language);
const rootElement= document.getElementById("root");
render(
  <BrowserRouter>     <Routes>        <Route path="/" element={<App language={language} setLang={changeLanguage} />} />        <Route path='tuktuktours' element={<TukTukTours language={language}/>}/>        <Route path='bycicletours' element={<BycicleTours language={language}/>}/>        <Route path='walkingtours' element={<WalkingTours language={language}/>}/>    </Routes>  </BrowserRouter>,
  rootElement
);

나는 반응 기능 구성 요소 또는 사용자 정의 후크 기능 외부에서 후크를 사용할 수 없기 때문에 위의 내용이 유효하지 않다는 것을 알고 있습니다.

위에 있는 것을 달성하는 가장 좋은 방법은 무엇입니까?

감사합니다

이것은 주관적이지만 앱의 모든 자식이 상태를 공유하는 경우 상태를 앱에 넣고 해당 값과 setter를 props로 자식(내비 바 포함)에 전달합니다.

Jake Worth2021-11-29 04:45:11

그것이 내가 현재 가지고 있는 것입니다. 유일한 문제는 WalkingTours, TukTukTours 및 BycicleTour가 앱의 하위 항목이 아니라는 것입니다. "다른" 페이지입니다.

Jorge Guerreiro2021-11-29 04:45:11

기존 React 앱에서 App은 다른 구성 요소의 부모입니다. 여기에서 아이들 간에 공유되는 상태와 같은 항목을 찾을 수 있습니다.

Jake Worth2021-11-29 04:45:11

나는 당신의 의견이 내 머리를 클릭하게 만들었다고 생각합니다. 제 구조가 완전히 잘못된 것 같습니다. index.js에 경로를 설정할 수 있지만 내 구성 요소가 다른 페이지인지 여부에 관계없이 앱에서 로드할 수 있습니까?

Jorge Guerreiro2021-11-29 04:45:11

사용 중인 React Router의 버전이 중요합니다. 귀하의 버전에 대한 문서를 확인하십시오. 그들 각각은 훌륭한 예를 가지고 있습니다. 하지만 예, 앱은 일반적으로 모든 구성 요소의 부모이며 공유 언어 논리가 있을 수 있는 곳입니다.

Jake Worth2021-11-29 04:45:11
  • 이전 ValueError: 워크시트 인덱스 0이 잘못되었습니다. 워크시트가 0개 있습니다. Python에서 팬더로 xlsx를 열 수 없습니다.
  • 다음 php : 배열에 있는 모든 값 체크박스