react-router V6“网址更改但组件未呈现”

Question

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

我正在使用“react-router (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;

MainNavigation.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;

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

谢谢你。

Answer 1

如果您希望使用“/”路线，则需要包含“索引”。

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

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

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

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

然后，添加一个名为 AboutPage 的组件并将您的 about 页面逻辑放入其中。 在您的 Routes 中，将此 About 页面作为新路由嵌套在您的 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 现在处理路由的方式

Answer 2

您可以使用您的路线继承方式，例如；

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

Answer 3

据我所知，您没有正确实现Router组件。

路由器

如果您检查更高级别的路由器之一，例如BrowserRouter ，您会注意到它们将history object 内部化，并根据导航操作 ( 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} /> ); }

创建一个使用自定义history object 并管理 state 的CustomRouter ：

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')
);