标签: react-router-dom

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

这些链接在产品页面上不起作用.单击链接时会更新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中的警报,以便在您按照链接时看到它呈现,但没有任何反应.

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

如何访问 React 组件中的 url 参数？

应用程序.js

<Route path="/question/:id" element={<QuestionView />} />

QuestionView.js

class QuestionView extends React.Component {     
    render() {
          const { questions, users } = this.props;
          const {id} = ??? 

如何使用 React router dom v6 滚动到路由更改顶部？

我已经尝试过这个，react-router在每次转换时滚动到顶部，这是我的解决方案，当我使用v5时，使我的页面在路线更改时滚动到顶部react-router-dom。现在，我使用的是react-router-domv6，这个解决方案不起作用。

我尝试了React-router v6 window.scrollTo 不起作用 ，也不适合我。

我尝试了https://github.com/remix-run/react-router/issues/7365，即使用preloadprop 来触发scrollTo(0,0)，对我来说也不起作用。

如何解决自定义路由组件中禁止传播道具？

eslint：第 3 行和第 6 行禁止传播道具

const PrivateRoute = ({component: Component, ...rest}) => (
  <Route
    {...rest}
    render={(props) => (
        localStorage.getItem('user') ?
          <Component {...props} /> :
          <Redirect to={{pathname: '/login', state: {from: props.location}}} />
  )}
  />
);

我在应用程序中使用 React Router v6。我有一个布局页面，它使用一个插座来显示主要内容。我还想包括一个标题部分，该部分根据匹配的路径而变化，但我不确定如何做到这一点。

function MainContent() {
  return (
    <div>
      <div>{TITLE SHOULD GO HERE}</div>
      <div><Outlet /></div>
    </div>
  );
}

function MainApp() {
  return (
    <Router>
      <Routes>
        <Route path="/projects" element={<MainContent />} >
          <Route index element={<ProjectList />} title="Projects" />
          <Route path="create" element={<CreateProject />} title="Create Project" />
        </Route>
      <Routes/>
    </Router>
  );
}

这样的事情可能吗？理想情况下，除了标题之外，我还希望有一些其他道具可以通过这种方式控制，因此对于这样的变化有一个好的组织系统会很棒。

谁能解释一下“react-router-dom”中的 {Link} 和 {useNavigate} 之间的区别吗？我是 React 新手，我看到 {Link} 和 {useNavigate} 都用于在路线中导航。那么它们有什么不同呢？

我已在文档中阅读过此内容，但我不确定BrowserRouter和之间有什么区别createBrowserRouter。

这就是文档中所说的：

创建浏览器路由器：

这是所有 React Router Web 项目的推荐路由器。它使用 DOM History API 来更新 URL 并管理历史堆栈。

它还支持 v6.4 数据 API，如加载器、操作、获取器等。

浏览器路由器：

A<BrowserRouter>使用干净的 URL 将当前位置存储在浏览器的地址栏中，并使用浏览器的内置历史记录堆栈进行导航。

我的第二个问题是：

我可以createBrowserRouter在不添加数据 API（如加载器、操作等）的情况下使用吗？原因是我不确定如何将数据 API 与 Redux Toolkit Query 一起使用，而且我发现来源有限。我也许可以稍后添加加载器。

我试图在YouTube和官方文档上学习一些React基础知识,我只在两个视频中遇到了多个不同的路由器.可悲的是,导师根本没有解释任何事情,我比以前更加困惑.

博士:我真的没有区分浏览器路由器,"普通"路由器和索引路由器.谢谢大家帮助我.

我突然收到这个错误，不知道为什么。我没有更改版本"react-router-dom": "^6.0.0-beta.4"。但是"react-dom": "^16.8.4"“已更改为"react-dom": "^16.13.1"，不知道这是否与我不知道有什么关系，但它useRoutes来自哪里"react-router-dom"，这就是错误的根源。

有人知道吗？

这是我使用的 App.jsx useRoutes(routes)，它给了我错误：

import React, { useEffect } from 'react';
import { AnimatePresence } from 'framer-motion';
import { connect } from 'react-redux';
import { compose } from 'recompose';
import { useRoutes } from 'react-router-dom';
import { ThemeContextProvider } from './theme/ThemeProvider';
import { getAlbumData } from './redux/albumData/albumData.actions';
import { getMetaData } from './redux/albumMetaData/albumMetaData.actions';
import {
    startTagsListener,
    startTagsCategoryListener,
} from './redux/global/global.actions';1111

import { withAuthentication } from …

执行一些逻辑后，我需要打开一个指向新选项卡的链接。
我有一个这样的按钮：

<Button
  onClick={handleSubmit}
>
  Preview
</Button>

与 handleSubmit() 是：

<Button
  onClick={handleSubmit}
>
  Preview
</Button>

如您所见，对于我的用例，使用该Link组件是没有意义的。

那么，有没有办法将该链接推送到新选项卡，只使用 history.push()