reactjs - @reach/router - 路径更新但单击链接时组件不呈现

Question

根据 react-router-dom github 页面上的推荐，我开始将 @reach/router 用于一个新项目。不幸的是，看似非常简单的用例无法正常工作。我首先尝试将 @mui BottomNavigation 组件与 @reach/router Link 一起使用，如下所示:

<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} component={Link} to="/favorites" />

点击导航中的按钮会更新浏览器中的 URL，但不会呈现“收藏夹”组件。所以我删除了一个变量并尝试直接在组件之间路由:

<Link to="/favorites">Favorites</Link>

这也以同样的方式失败，URL 更新但组件不呈现。我考虑过将编程导航与 @reach/router 提供的 useNavigation Hook 一起使用，但这只能在嵌套在 Router 下的组件中使用parent，而我的 BottomNavigation 组件不是，因为它无法通过路径寻址。关于为什么这不起作用的任何想法。似乎是一个简单的用例。

这里是相关的细节。

AppRoutes.tsx

<Router onChange={(event) => console.log(event)}>
   <LoginPage path="/" />
   <VisitedPage path="/visited" />
   <FavoritesPage path="/favorites" />
   <OptionsPage path="/options" />
   <HousePage path="/house" />
</Router>

底部导航.tsx

<BottomNavigation
   showLabels
   value={value}
   onChange={(event, newValue) => {
      setValue(newValue);
   }}
>
   <BottomNavigationAction label="Visited" icon={<VisibilityIcon />} component={Link} to="/visited" />
   <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} component={Link} to="/favorites" />
   <BottomNavigationAction label="Options" icon={<SettingsIcon />} component={Link} to="/options" />
</BottomNavigation>

应用.tsx

<div>
   <Header />
   <div className="content">
      <AppRoutes />
   </div>
   <BottomNav />
</div>

组件之间的链接示例:

import { Link, RouteComponentProps } from "@reach/router";

export default function OptionsPage(props: RouteComponentProps) {
    return <Link to="/favorites">Favorites</Link>
}

Answer 1

我有同样的问题，我通过使用解决了它:

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';

render(<React.StrictMode>
    <App />
</React.StrictMode>, document.getElementById("root"));

代替:

import React from "react";
import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

渲染应用。

React 18 不再支持 ReactDOM.render，所以我认为你应该切换到 React 路由器。或者，您可以使用 javascript 而不是 typescript，因为 @react/reach 在它上面可以正常工作。