小编Dre*_*ese的帖子

几天以来，我一直在尝试在登录到主页后重定向我的用户，在我的 App.js 中创建一个回调函数，并通过 loginregisterpage 类组件将其作为道具发送到登录类组件，但这不起作用，有人可以吗看看它并告诉我我错过了什么？谢谢我的代码看起来像这样

应用程序.js

import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import { HomePage } from './Pages/HomePage/HomePage'
import { LoginRegisterPage } from './Pages/LoginRegisterPage/LoginRegisterPage'
import 'bootstrap/dist/css/bootstrap.min.css'

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      authenticated: false,
    }
    this.handleSuccess = this.handleSuccess.bind(this);

  }
  handleSuccess = (data) => {
    this.props.history.push("/")
  }

  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/">
            <HomePage />
          </Route>
          <Route exact path="/login-register">
            <LoginRegisterPage onLoginSuccess={this.handleSuccess} />
        </Switch>
      </Router> …

我在我的 React 项目中使用 reselect lib。

我已经创建了Posts工作正常的选择器。这是代码

// selectors.ts

const getPosts = (state: RootState) => state.posts.posts;

export const getPostsSelector = createSelector(getPosts, (posts) => posts);

我在我的页面上这样称呼它

// SomePage.tsx    
const posts = useSelector(getPostsSelector);

现在我需要通过 id 获取帖子。我想这样做：

// selectors.ts

const getPostDetail = (state: RootState) =>
  state.posts.posts.entities[ID];

export const getPostsById = createSelector(
  getPostDetail,
  (detail) => detail
);

并在页面上调用：

const PostDetail = useSelector(getPostsById);

我有两个问题：

• 获得单一职位的正确方法是吗？
• 如果是，如何传递帖子 ID 如果不是，如何正确处理？

我正在学习如何使用useMatch()我"react-router-dom" 收到以下错误并且我的网页为空白：

Uncaught TypeError: Cannot read properties of undefined (reading 'path')
    at matchPath (index.tsx:1148)
    at index.tsx:481
    at mountMemo (react-dom.development.js:15846)
    at Object.useMemo (react-dom.development.js:16219)
    at useMemo (react.development.js:1532)
    at useMatch (index.tsx:481)
    at About (About.js:7)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)

我的代码如下

import React from "react"
import { useMatch  } from "react-router-dom"
import { Link, Route } from "react-router-dom"
import SinglePage from "./SinglePage"

const About = () => {
  const { url, path } = useMatch()
  console.log("hello usematch!", …

我正在id从ProductListing组件发送一个，并且我正在组件中id使用它来接收它。在组件中，我使用 find 方法查找一个对象，然后将其设置为状态。刷新时我得到的是未定义的。useParamsProductDetailProductDetailsingleProductsingleProduct

进口

import React, { useState, useEffect } from "react";
import { NavLink, useParams } from "react-router-dom";
import Loading from "../other/Loading";

状态

const ProductDetail = () => {
  const [loading, setLoading] = useState(false);
  const [products, setProducts] = useState([]);
  const [singleProduct, setSingleProduct] = useState({});

使用 useParams 接收 id

  const { id } = useParams();

使用效果

  useEffect(() => {
   //GETTING PRODUCTS ARRAY
    getProductListingData();
   //FINDING A SINGLE OBJECT
    getProductID();
  }, …

我面临一个问题。我正在尝试使用 React Router，但它一直向我显示空白页面。这是我的代码：

应用程序.js：

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "./HomePage";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
      </Routes>
    </Router>

  );
};

export default App;

主页.js：

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

const HomePage = () => {

    return <div>hi</div>
}

export default HomePage;

索引.js：

import React from "react";
import ReactDom from "react-dom";
import App from './App';


ReactDom.render(<App/>, document.getElementById("root"))

我已经安装了“React Router V6”，谁能告诉我有什么问题吗？感谢所有的帮助者。

我正在使用带有钩子的react-router v6 useRoutes()（文档）。

我正在尝试添加路线转换react-transition-group。

我尝试了很多不同的东西，但动画并不干净，并且不适用于子路线 - 整个布局动画而不是子路线。

export const App = () => {
  const routes: RouteObject[] = [
    {
      path: "/",
      element: <Layout />,
      children: [
        { index: true, element: <Home /> },
        {
          path: "/courses",
          element: <Courses />,
          children: [
            { index: true, element: <CoursesIndex /> },
            { path: "/courses/:id", element: <Course /> },
          ],
        },
        { path: "*", element: <NoMatch /> },
      ],
    },
  ];

  const element = useRoutes(routes);
  const location = …

根据我的问题React router v6 和路线内页面的相关链接，我尝试重构应用程序中的路线以使其更加嵌套。

问题是，似乎不可能从数据递归渲染 Route 元素，因为 React-router 坚持认为 Route 直接位于 Route 内部，而不是包装在另一个组件中，而且我看不到如何递归渲染（任意深度）任何另一种方式。

在codesandbox 上复制。

import React from "react";
import { BrowserRouter, Routes, Route} from "react-router-dom";

import "./styles.css";

function GenericPage() {
  return <div className="page">Generic page</div>;
}

const nav = {
  slug: "",
  title: "Home",
  children: [
    {
      slug: "foo",
      title: "Foo"
    },
    {
      slug: "bar",
      title: "Bar"
    }
  ]
};

const RecursiveRoute = ({ node }) => {
  return (
    <Route path={node.slug} element={<GenericPage />}>
      {node.children?.map((child) => ( …

目标

我正在尝试实现一个看起来像这样的屏幕。有两个菜单，一个是由createDrawerNavigatorreact-navigation（左上角）创建的汉堡菜单。另一个菜单是由创建的底部按钮createBottomTabNavigator。

是的，有两个菜单并不是一个好的用户界面选择，但这是我公司的选择。此外，这些菜单至少共享一个条目（主页）。

我尝试了什么

这个 stackoverflow非常接近期待的结果，但我不知道如何显示汉堡菜单，而不是像帖子那样显示简单的视图。

我尝试了多种层次结构，但没有成功地实现目标。

所以我没有主意，决定自己完成底部菜单。它似乎运行良好，但某些路线未定义，因此我无法导航到它们（例如屏幕上的购物车和搜索）

看来反应导航使用其组件来定义路线。

问题

如何将路线添加到导航系统以便能够导航到它们？

我试过 ：

• 指定一个初始状态<NavigationContainer>但它似乎不起作用。

• 创建了一个自定义路由器来覆盖该方法，但之后getInitialState我不知道如何使用我的自定义路由器！

任何帮助将不胜感激

编辑：

导航代码

// src/menu/burger/drawer.js
import { createDrawerNavigator } from '@react-navigation/drawer';
import { useTranslation } from 'react-i18next';
import Ionicons from '@expo/vector-icons/Ionicons';
import React from 'react';

import Account from '../../pages/account';
import Brands from '../../pages/brands';
import Cart from '../../pages/cart';
import Homepage from '../../pages/homepage';
import {
  ACCOUNT,
  BRANDS,
  CART,
  HOMEPAGE,
} from '../../pages/pageIdentifiers';

const Drawer = …

我是 React 新手，并尝试制作一个加载/问候页面，在显示几秒钟后导航到下一个页面。在 React Router v6 中，我们有一个useNavigate()钩子可以让你控制导航，我使用它通过在钩子中设置超时来成功调用导航函数useEffect()。但是，编译器抱怨我缺少依赖项。我只希望它运行一次，而不是每当发生navigate变化时运行。做这个的最好方式是什么？

谢谢！

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

function Greeting(props) {
  const navigate = useNavigate();
  useEffect(() => {
    setTimeout(() => navigate(props.nextPage), 3000);
  }, []);

  return (
    <div className="Greeting">
      <div>Hello World!</div>
    </div>
  );
}

export default Greeting;

第 9:6 行：React Hook useEffect 缺少依赖项：“navigate”。包含它或删除依赖项数组react-hooks/exhaustive-deps

我开始使用react-router-dom版本 6.4.0 的 React 项目，但无法为所有路由创建通用标头。

App.js - 这是我要添加的文件RouterProvider

import logo from './logo.svg';
import './App.css';
import { Link, Outlet, RouterProvider } from "react-router-dom";
import { routers } from "./routes/routes";

function App() {
  return (
    <RouterProvider router={routers}>
      <div>Header</div>
      <Outlet />
    </RouterProvider>
  );
}

export default App;

routes.js - 在这个文件中我将创建所有路线

import { createBrowserRouter, redirect } from "react-router-dom";
import About from "../pages/About/About";
import Home from "../pages/Home/Home";
import { getUser, isAuthenticated } from "../sso/authUtil";

const authLoader = () => {
  if (!isAuthenticated()) …