小编Dre*_*ese的帖子

这是代码截图。

我想渲染Homepage组件，但我想将其包装到这些MainLayout组件中。

问题是屏幕是空白的，终端中没有错误，但是当我检查页面时，它显示“位置“/”处的匹配叶路由没有元素”，所以我知道这是版本更新语法问题，因为我我在写作时遇到了同样的问题，component= {component }但语法已经改变，我应该写element={<component />}。

所以我相信这也是语法问题，但我已经做过研究但无法解决。我相信我应该改变这一点

/* ... */ render = {() => (
  <MainLayout>
    <Homepage />
  </MainLayout>
)}

有点新的语法，但不知道如何。

我有以下链接：

<NavLink to={x.url} className={(x) = x.isActive ? 'active' : 'not-active' } >
    <img src={`icon-default.svg`} /> // change from default.svg to active.svg       
    Link Text
</NavLink>

img我的图标位于 HTML 而不是 CSS 中，我想根据 isActive 调用不同的 img，是否可以在子元素（标签）上执行此操作？

react-router-dom": "^6.0.2"

谢谢

以下React路由代码可能在React Router v5中工作，但在React Router v6中给出以下错误

错误：[Player] 不是组件<Route>。的所有子组件<Routes>必须是<Route>或<React.Fragment>

是否可以更新路由/路由代码，以便它在 React Router v6 中工作？

function App() {
  // Some stuff here...

  const { players, offlinePlayers } = usePlayers();


  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
        <BrowserRouter>

            <Routes>
                <Route path="/" element={<Home />} />

                <Route path="/players">
                {players.map((player) => {
                    return (
                    <Route exact key={player.name} path={`/players/${player.name}`}>
                        <Player player={player} />
                    </Route>
                    );
                })}
                </Route>
            </Routes>  

        </BrowserRouter>
    </ThemeProvider>
  )

}

当我想从产品列表中按 ID 查看产品时，我想构建一个页面。在我的应用程序文件中，我有类似的内容：

<Route path={ROUTES.product} element={<Product id={1} />}> 

但我想用来自所选产品的值替换静态 ID。在我的产品文件中，我已重定向到包含产品的页面，但我不知道如何传递 ID。

onClick={() => { navigate(`/products/${product?.id}`)}}

任何帮助，将不胜感激。

我想使用 React Router 点击刷新页面。

我知道，我可以用window.location.reload();

但我想使用 React Router 的一些魔法。有一种方法可以使用 React Router 刷新页面，还是应该使用 window 对象中的普通方法？

我希望能够监听查询参数更改事件，最好是通过钩子，但任何事情都很好。我找不到任何表明它甚至可以使用react-router的东西，所以也欢迎其他没有它的建议。

任何大型应用程序都会有可能需要路由器重定向用户的一般上下文。由于RouterProvider只能在根级别使用。如何将它与应用程序上下文一起使用。

例如，ApiContext如果用户无权访问 API，我会重定向到 403 路由/组件。

如何将此上下文包装在 中，而RouterProvider不必在每次路由更改时重新渲染它。换句话说。我怎样才能拥有使用路由器的父上下文？

如果我使用 ，它工作得很好BrowserRouter，但在 v6.8 中卸载之前使用任何类型的提示的唯一方法是使用数据 api 和方法createBrowserRouter。

标题导航也是如此。我不希望我的标头出现在每个路由组件和路由的一部分中。我希望我的标头是静态的，而路由组件是动态的。

// Aplication Context
export const ApiContext = React.createContext({});

export const ApiProvider = memo((p: { children: React.ReactNode; }) => {
  const navigate = useNavigate();
  const [token, setToken] = useState<string>()

  if (!token) {
    navigate('/403');
  }

  const value = useMemo(() => ({}), []);
  return (
    <ApiContext.Provider value={value}>
      {p.children}
    </ApiContext.Provider>
  );
});

// Index
const router = createBrowserRouter([
  {
    path: …

我有一个react + django + webpack的项目。我在我的上定义了路线App.js

<NavBar />
<Router>
  <Routes>
    <Route exact path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Router>

Links我在我的组件中定义NavBar.js：

import React from "react";
import { Link } from "react-router-dom";

export default function NavBar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

如果我Link在其中使用App.js它可以正常工作，但是当我在组件中使用它时NavBar.js我会收到此错误：

网络包配置：

<NavBar />
<Router>
  <Routes>
    <Route exact path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Router>

我Switch也尝试使用，但它只能使用超链接 …

在 React Router 5 中，我可以使用 a<redirect path='' />但已在 React Router 6 中删除。我认为它已被替换为<Navigate>，但这会引发此用例的安全错误。

我在 Reactjs 上创建了一个网站，并使用“react-router-dom v6”链接了各个页面。每当我从一个页面转换到另一个页面时，第二页总是加载到当前位置而不是顶部。我已经尝试了很多教程和解决方案，但它们在react-router-dom v5之前都有效。