标签: react-router-dom

这是我的代码

14      <NavLink
15        to={{
16          pathname: `/confirmMail`,
17          user: { email, nickName },
18        }}
19      >
20       {"Confirm Email"}
21     </NavLink>

在第 17 行我收到错误

输入 '{ 路径名：字符串；用户：{电子邮件：字符串；昵称：字符串；}; }' 不可分配给类型 'LocationDescriptor | ((位置：位置) => 位置描述符)'。对象文字只能指定已知属性，并且类型“LocationDescriptorObject |”中不存在“用户” ((位置：位置) => 位置描述符)'。

我正在使用 antd 菜单和菜单项组件。我的应用程序是这样的，如果您单击特定的菜单项，则 url 会发生变化并且该菜单项会被选中。但是，如果您在仪表板上，您还可以单击一个按钮，将 URL 更改为与单击该特定菜单项时相同的 URL，但在这种情况下，该菜单项不会被选中。如何解决这个问题：

              <Menu
                onClick={this.handleClick}
                mode="vertical"
              >
                <Link to="/dashboard">
                   <Menu.Item key="mail" icon={<MailOutlined />}>
                     Dashboard
                   </Menu.Item>
                 </Link>
                <Link to="/add-recipe">
                   <Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
                     Add Recipes
                   </Menu.Item>
                 </Link>
              </Menu>

现在，在仪表板组件中还有一个按钮，允许用户直接从那里添加菜谱并在单击时更改 url，但不会选择“添加菜谱”菜单项，因为它不是手动单击的。如何根据 url 使其激活？

:paramName 与包含点“.”的 URL 段不匹配

我的路径<Route path="/:id" component={Query} />中有一条App.js
当我尝试导航到 时localhost:3000/abc.xyz，页面显示找不到页面
注意：该项目正在使用 vitejs

嘿，我有一个主页组件的背景图片。我已将背景图像放置在标题组件中。在我的标题组件中有一个导航栏和背景图像。我已将 Header 组件放置在 React Router 内的开关外部，以便某些页面可以访问导航栏。现在我想做的是，当我进入食物描述页面时，我想保留导航栏，但我想更改/删除背景图像。我怎样才能做到这一点？

应用程序.js

function App() {
  return (
    <div>
      <DataContextProvider>
        <LoginContextProvider>
          <Router>
            <Header></Header>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/login" component={Login} />
              <Route path="/food/:id" component={FoodDetail} />
            </Switch>
          </Router>
        </LoginContextProvider>
      </DataContextProvider>
    </div>
  );
}

header.js

<div className={classes.grow}>
      <AppBar position="fixed" style={{ backgroundColor: "white" }}>
        <Container>
          <Toolbar>
            <Link to="/">
              <Typography className={classes.title} variant="h6" noWrap>
                Material-UI
              </Typography>
            </Link>

            <div className={classes.grow} />
            <div className={classes.sectionDesktop}>
              {loggedInUser.email ? (
                <MenuItem onClick={handleProfileMenuOpen}>
                  <IconButton
                    aria-label="account of current user"
                    aria-controls="primary-search-account-menu"
                    aria-haspopup="true"
                    color="inherit"
                  >
                    <AccountCircleIcon style={{ fill: …

我有一个 React 应用程序，其中的 URL 使用 React Router 定义：

const App: React.FC = (): JSX.Element => {
  return (
    <Router>
      <Switch>
        <Redirect exact from="/" to="/rules" />
        <Route
          exact
          path={["/rules", "/rules/:placeId"]}
          component={LandingPage}
        />
        <Route
          exact
          path={["/route", "/route/:start/:end"]}
          component={RoutePage}
        />
      </Switch>
    </Router>
  );
};

如果 url 包含这样的哈希部分，我想允许用户转到文档的特定手风琴部分/rules/someplace#accordion-3

我有一个返回相关手风琴的组件，它们都有一个 id：

const CategoryDisplay: React.FC<Props> = (props) => {
...
  return (
    <>
      <Accordion
        id={`category-${accordion.id}`}/>
    </>
  );
};

export default CategoryDisplay;

当我打开带有锚点的 URL 时（就像/rules/someplace#accordion-3我已经在页面上一样），一切正常并且滚动到该元素。但是，在页面初始加载时，此行为不起作用。

仅在页面加载后我将如何滚动到该元素？

我正在开发一个 React 应用程序，我尝试使用 onSubmit 函数从登录表单导航到应用程序的主屏幕。这是我到目前为止所拥有的。在我的 formik 表单中，我尝试在提交表单时传递电子邮件值。之后，用户被路由到“/dashboard”并最终进入“/dashboard/app”，我试图在控制台中获取记录的电子邮件值。我尝试记录route.params和route.email，但这给出了未定义或错误。

我用 create-react-app 构建了这个 React js 应用程序。我使用react-router-dom作为路由。当我直接访问任何链接（例如 url/products）时，它会抛出 404 错误页面。但如果我从应用程序上的链接进入该页面，它将直接工作。但这两种方式在开发中都运行得很好。我只在生产时收到此错误。

它托管在 DigitalOcean 上

这是我的 app.js 设置：

<Router>
      <NavBar />
      <Switch>
        <Route exact path={`${process.env.PUBLIC_URL}/`} component={Home} />
        <Route path={`${process.env.PUBLIC_URL}/products`} component={Products} />
        <Route path={`${process.env.PUBLIC_URL}/category/:category`} component={Category} />

请帮助看看我做错了什么并提出修复建议

我对反应相当陌生，并尝试使用react-router-dom进行重定向，我按照文档做了所有事情，但我的代码似乎不起作用。我收到一条关于找不到元素的错误，我不明白是什么原因造成的。另外，我现在只是尝试使用地址栏而不是任何按钮或链接来访问该页面。

错误

Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

/register 出现同样的错误

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import Register from "./components/Register";

ReactDOM.render( 
  <Router>
    <React.StrictMode>
      <Routes>
        <Route exact path="/register" component={Register} />
        <Route exact path="/" component={App} …

从 React Router Dom 更新到版本 6 后，我需要帮助。我有一个用户登录后重定向的代码片段，它应该在版本 5 中工作，但我认为“重定向”已被弃用。现在，我正在寻找一些可以集成到我以前的代码中的替代品。

这是我的代码示例，它应该在 React Router Dom 版本 5 中工作：

<Route path='/signin' render={() => this.props.currentUser ? (<Redirect to =''/>) : (<SignIn/>)}></Route>

我认为我应该使用类似“Navigate”的内容，但我不确定如何使用条件语句来实现它，因为对于版本 6，我还必须添加“element={}”部分。

如果您需要更多信息，请告诉我。

谢谢！

我收到一个来自 的 url 参数useParams。我想使用将它传递给选择器mapStateToProps。

集合.组件.jsx

import { useParams } from "react-router-dom";
import { connect } from "react-redux";

import { selectShopCollection } from "../../redux/shop/shop.selectors";

import './collection.styles.scss'

const Collection = ({ collection }) => {
  const { collectionId } = useParams();
  console.log(collection)
  return (
    <div>
      <h1>{collection}</h1>
    </div>
  )
}

const mapStateToProps = (state, ownProps) => ({
  collection: selectShopCollection(ownProps.match.params.collectionId)(state)
})

export default connect(mapStateToProps)(Collection);

shop.selectors.js

import { createSelector } from "reselect"

const selectShop = state => state.shop

export const selectShopCollections …