리액트-라우터 V6 "url 변경은 있지만 구성 요소가 렌더링하지 않음"

리액트-라우터 V6 "url 변경은 있지만 구성 요소가 렌더링하지 않음"

스택 오버플로에 이미 게시된 모든 답변을 확인했음에도 불구하고 나는 내 사례에 대한 해결책을 찾지 못했기 때문에 그것을 게시할 것이다.

사용자 지정 기록 개체를 사용하여 Redex 작업에서 탐색할 수 있도록 'react-roouter(v6)의 {Router}을(를) 사용하고 있다.

여기 내 파일들이 있다:

인덱스.tsx

import { Router } from 'react-router';
import myHistory from './utils/history';

ReactDOM.render(
   <Provider store={store}>
      <Router navigator={myHistory} location={myHistory.location}>
         <App />
      </Router>
   </Provider>,
   document.getElementById('root')
);

앱.tsx

import MainNavigation from './components/navigations/MainNavigation';
import Routes from './routes/Routes';

const App = () => {
   return (
      <>
         <MainNavigation />
         <Routes />
      </>
   );
};

export default App;

메인내비게이션.tsx

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

const MainNavigation = () => {
   return (
      <nav className='navigation'>
         <ul>
            <li>
               <Link to='/'>Home</Link>
            </li>
            <li>
               <Link to='/contact'>Contact</Link>
            </li>

            <li>
               <Link to='/about'>A propos</Link>
            </li>

            <li>
               <Link to='/user-profile'>Votre compte</Link>
            </li>
         </ul>
      </nav>
   );
};

export default MainNavigation;

Route.ts

import { Route, Routes as Routing } from 'react-router';

const Routes = () => {
   return (
      <Routing>
         <Route path='/' element={<Home />} />
         <Route path='/about' element={<About />} />
         <Route path='/contact' element={<ContactForm />} />
         <Route path='/user-profile' element={<UserAccount />} />
         {/* <Route path='*' component={Error404} /> */}
         {/* <Navigate to='/' /> */}
      </Routing>
   );
};

export default Routes;

문제: 링크 중 하나를 클릭하면 URL이 해당 경로로 변경되지만 구성 요소가 렌더링되지 않는 경우.페이지를 새로 고쳐야 실제로 나타날 수 있다.정말 무슨 일이 일어나고 있는지 모르겠다.

감사합니다.

내가 알기로는 당신이 정확히 구현하지 않은 것 같다.Router구성 요소

라우터

상위 수준의 라우터 중 하나를 검사하면 라우터가 내장되는 것을 알 수 있다.history또한 탐색 동작의 결과로부터 현재 위치를 저장한다().history.listen

export function BrowserRouter({
  basename,
  children,
  window
}: BrowserRouterProps) {
  let historyRef = React.useRef<BrowserHistory>();
  if (historyRef.current == null) {
    historyRef.current = createBrowserHistory({ window });
  }

  let history = historyRef.current;
  let [state, setState] = React.useState({
    action: history.action,
    location: history.location
  });

  React.useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      basename={basename}
      children={children}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
}

만들기CustomRouter관습을 소비하는history객체화 및 상태 관리:

const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

대신 새 사용자 지정 라우터를 가져와서 사용하십시오.

import { CustomRouter } from './components/router';
import myHistory from './utils/history';

ReactDOM.render(
  <Provider store={store}>
    <Router history={myHistory}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
);

다음과 같이 상속받은 경로를 사용할 수 있다.

<Routes>
  <Route path="/">
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="contact" element={<ContactForm />} />
    <Route path="user-profile" element={<UserAccount />} />
    <Route path="*" element={<NoMatch />} />
  </Route>
</Routes>

'/' 경로를 사용하려면 'index'를 포함해야 한다.

<Route path='/about' index element={<About />} />

또한 Ract Router v6는 v5와 근본적으로 다르다. 새로운 아웃렛 기반 라우팅으로 전환한다.페이지를 표시하려면 등록된 경로 구성요소에 아웃렛이 있어야 한다.예를 들어 app.js 구성 요소에서<Outlet />이 페이지를 넘기기 위해서.

나는 새로운 경로를 컨테이너 기반 내비게이션으로 생각하고 싶다.따라서 AboutContainer라는 구성 요소를 생성하십시오.포함하다<Outlet />이 구성 요소에서

export const AboutContainer = () => (
  <Outlet />
)

그런 다음, AboutPage라는 구성요소를 추가하고 페이지 논리를 내부에 넣으십시오.경로에서 이 정보 페이지를 AboutContainer 라우터 논리 내의 새 경로로 중첩하십시오.

<Routes>
  <Route path='/about' element={<AboutContainer />}>
    <Route path='/' index element={<AboutPage />} />
  </Route>
...
</Routes>

이는 /about으로 이동할 때마다 AboutPage 구성 요소가 표시된다는 것을 의미한다.한 걸음 더 나아가 다른 경로 추가

<Routes>
  <Route path='/about' element={<AboutContainer />}>
    <Route path='/' index element={<AboutPage />} />
    <Route path='/you' index element={<AboutYouPage />} />
  </Route>
...
</Routes>

라우터 6 반응에서 라우팅을 처리하는 방법

참조URL: https://stackoverflow.com/questions/70576962/react-router-v6-url-changes-but-component-does-not-render