React-router V6“url 更改但组件未渲染”

Question

尽管检查了堆栈溢出上已经发布的所有答案，但我找不到适合我的案例的解决方案，所以我将发布它。

我正在使用“react-router (v6)”中的 {Router}以便能够使用自定义历史记录对象在我的 redux 操作中进行导航。

这是我的文件：

索引.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;

路由.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;

问题：当我单击其中一个链接时，网址会更改为相应的路径，但组件不会呈现。我必须刷新页面才能真正显示出来。我真的不知道发生了什么事。

谢谢。

Answer 1

如果您想使用“/”路线，则需要包含“index”。

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

此外，React Router v6 与 v5 完全不同。它切换到新的基于出口的路由。为了显示您的页面，您需要在注册的 Route 组件中有一个 Outlet。例如，在app.js组件中，您需要添加<Outlet />才能渲染这些页面。

我喜欢将新路由视为基于容器的导航。因此创建一个名为 AboutContainer 的组件。包含<Outlet />在此组件中。

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

然后，添加一个名为 AboutPage 的组件，并将您的关于页面逻辑放入其中。在您的路由中，将此“关于”页面作为新路由嵌套在您的 AboutContainer Router 逻辑中；

<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>

这就是 React Router 6 现在处理路由的方式