标签: react-router-dom

我正在尝试围绕react-router-dom NavLink组件创建一个包装器组件.

我希望我的自定义组件接受所有NavLinks道具,并将它们代理到NavLink.

但是,当我这样做时,我得到:

__PRE__

可以在此处找到该问题的工作演示:https://codesandbox.io/s/w0n49rw7kw

谢谢,

对于使用什么而言似乎有些混淆:

• <Link to='/some/path'>
• <Redirect to='/some/path'/>
• history.push('/some/path')

我一直在使用React/Router一段时间,不同的帖子/答案说明何时使用这些,有时它们与其他人说的不一致.所以我想我需要澄清一下.

根据我的理解Link和本文档:

为您的应用程序提供声明性,可访问的导航.

根据我的理解Redirect和本文档:

将导航到新位置.新位置将覆盖历史堆栈中的当前位置,如服务器端重定向(HTTP 3xx).

看起来我读过的所有帖子几乎每个人都Redirect用来浏览应用程序,没有人建议Link在这篇文章中使用.

现在history可以做同样的事情Link,Redirect除了我有一个历史堆栈跟踪.

问题1:我什么时候想使用Linkvs Redirect,另一个用例是什么？

问题2:既然history可以使用历史堆栈的额外奖励将用户路由到应用程序中的另一个位置,我应该在路由时始终只使用历史对象吗？

问题3:如果我想在应用程序之外进行路由,那么最好的方法是什么？锚标签,Window.location.href,Redirect,Link,以上都没有？

如何使用 localStorage 创建受保护的路由并将react-router-dom响应存储在 localStorage 中，以便当用户下次尝试打开时可以再次查看其详细信息。登录后，他们应该重定向到仪表板页面。

所有功能都添加到 ContextApi 中。Codesandbox 链接：代码

我尝试过但没能实现

路线页面

import React, { useContext } from "react";
import { globalC } from "./context";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import About from "./About";
import Dashboard from "./Dashboard";
import Login from "./Login";
import PageNotFound from "./PageNotFound";

function Routes() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  return (
    <BrowserRouter>
      <Switch>
        {authLogin ? (
          <>
            <Route path="/dashboard" component={Dashboard} exact />
            <Route exact path="/About" component={About} /> …

为什么 React router v6 useParams返回属性可能为“未定义”的对象？

在下面的代码中，我的 IDE 指示const slug: string | undefined.

const { slug } = useParams<"slug">();

这是因为Params类型定义：

/**
 * The parameters that were parsed from the URL path.
 */
export type Params<Key extends string = string> = {
  readonly [key in Key]: string | undefined;
};

但为什么不Params这样定义（没有| undefined）：

export type Params<Key extends string = string> = {
  readonly [key in Key]: string;
};

如果带有参数的路由与 URL 匹配，则该参数不能为undefined。那么，有没有 …

我在编写代码来呈现没有导航栏和侧边栏的登录页面时遇到问题。我遇到过一些提出类似问题的页面，但似乎都不适合我目前的情况。

如何在 React Router 的登录页面中隐藏导航栏 给出的示例很棒，但我相信完成相同任务的方式已经随着 React-router-dom v6 的改变而改变，这让我在https://dev.to/中阅读了有关此更改的信息iamandrewluca/private-route-in-react-router-v6-lg5

看来我不理解有关 React Router 路由的某些方面。在下面的代码中我有两条路线。我希望在没有导航栏和侧栏组件的情况下渲染路线之一（登录）。

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
      </Routes>

      <NavBar />
      <SideBar />
      <main className={styles["main--container"]}>
        <div className={styles["main--content"]}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
          </Routes>
        </div>
      </main>
    </>
  );
};

我也尝试过的另一种选择是将导航栏和侧栏标签移到仪表板组件中，但随后我基本上必须对任何新组件进行相同的复制和粘贴。这种方法感觉错误且效率低下，但如果这是正确的方法，我会做必要的事情

编辑：我认为重要的是包括它当前所做的事情是加载包含导航栏和侧边栏的登录页面。导航到仪表板组件有导航栏和侧边栏，但这是有意的。我想要的是登录页面没有导航栏和侧边栏

现在我有一个历史记录模块，它让我甚至可以在反应组件之外使用历史记录：

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

然后我直接在App.jsx中使用这个历史记录

import { Router } from 'react-router-dom';
...
<Router history={history}>...</Router>

我可以在任何地方导入和使用相同的历史对象。即使在任何反应组件之外的自定义助手中也是如此。

这如何在React router 6中工作？

由于历史记录被导航取代，我在网上还没有看到任何解决方案。

我知道它仍处于测试阶段，但我想提前检查一下。

感谢您的任何想法！

我有一个具有以下功能的反应组件

    const handleNavigate = (clientId) => {
        console.log(clientId)
        navigate(`/dashboard/clients/${clientId}`)
    }

console.log() 显示了我想要附加以在导航功能中使用的 ID。
并且
浏览器中的 URL正在更新。

但页面没有变化。

这适用于从 导航/dashboard/clients到/dashboard/clients/foo

但无法从 导航/dashboard/clients/foo到/dashboard/clients/bar

clientId 像这样传递到卡中......

const CompanyCard = (props) => {
    const { client, showWatchlist, removeDisabled, showRemove, removeType } = props
...
}

然后在卡里

                <CardActionArea
                    onClick={() => handleNavigate(client._id)}
                 ...

有任何想法吗？
谢谢

更新

在阅读了 @redapollos 的建议后，我尝试了Outlet，

useRoutes 方法...都不起作用。

import { useRoutes } from 'react-router-dom'

// then in the routes...

        { path: 'clientdetail/:id', element: …

我想将私有路由与react-router-dom v6一起使用，同时我尝试应用身份验证条件。

在 App.js 中

<Route path='/dashboard' element= { <PrivateRoute><Abc /></PrivateRoute>}/>

在组件 .js 中

<Routes> <Route {...rest} render={props => !isAuthenticated && !loading ? (<Navigate to='/login' />) : (<Component {...props} />)} /></Routes>

• 当路线不在 <Routes> 内部时，会出现错误：

错误： <Route> 只能用作 <Routes> 元素的子元素，不能直接渲染。请将您的内容封装在 <Routes> 中

• 当它位于 <Routes> 内部时，它会给出错误：

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

请帮我解决这种情况吗？或者有什么建议。

尝试过此操作，但在两种情况下均出现上述错误之一

<Route path='/dashboard' element= {<PrivateRoute> <Dashboard />
         </PrivateRoute>}/>

还

`<PrivateRoute path='/dashboard' element= { <Dashboard />}/>`

PIC代码完整

我一直在寻找这个问题并找到了它，但他们正在使用类组件和 React router dom v5

我想要的是当用户单击浏览器后退按钮时我会将他们重定向到主页

我有一个带有链接的"主页"组件,当您单击链接时,产品组件将随产品一起加载.我还有另一个始终可见的组件,显示"最近访问过的产品"的链接.

这些链接在产品页面上不起作用.单击链接时会更新URL,并且会进行渲染,但产品组件不会使用新产品进行更新.

请参阅此示例: Codesandbox示例

以下是index.js中的路由:

<BrowserRouter>
  <div>
    <Route
      exact
      path="/"
      render={props => <Home products={this.state.products} />}
    />

    <Route path="/products/:product" render={props => <Product {...props} />} />

    <Route path="/" render={() => <ProductHistory />} />

    <Link to="/">to Home</Link>
  </div>
</BrowserRouter>;

ProductHistory中的链接如下所示:

<Link to={`/products/${product.product_id}`}> {product.name}</Link>

所以他们匹配Route path="/products/:product".

当我在产品页面上并尝试关注ProductHistory链接时,会更新URL并进行渲染,但组件数据不会更改.在Codesandbox示例中,您可以取消注释Product components render function中的警报,以便在您按照链接时看到它呈现,但没有任何反应.

我不知道问题是什么......你能解释一下问题并找到解决办法吗？那太好了!