小编Dre*_*ese的帖子

我在我的 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 如果不是，如何正确处理？

我面临使用查询参数和反应路由器 dom 的问题。

当我执行 API 调用并返回状态 200 时，我将用户重定向到带有 History.push 的结果页面。到目前为止一切正常。但是，当我在结果页面上并刷新页面时，我想使用带有查询参数的 url 来执行新搜索，不幸的是 React Router Dom 无法识别该 url 并重定向我。

应用程序.tsx

<PrivateRoute path="/search?value=:searchValue&type=:searchType">
  <Dashboard />
</PrivateRoute>
<Route path="/redirection" component={RedirectionPage} />
<Redirect to="/login" />

搜索.tsx

history.push({
  pathname: `/search?${formattedSearch
    .map((search) => `value=${search.value}&type=${search.type}`)
    .toString()
    .replace(",", "|")}`,
  state: search
});

这个history.push效果很好，可以将用户重定向到所需的页面。

但是，当我使用相同的 url 刷新页面时，React Router Dom 无法识别该路由，并且不会将我重定向到该组件。

你有什么想法 ？谢谢您并祝您度过愉快的一天。

我尝试了几种方法来匹配查询字符串并根据该字符串显示组件，但没有运气，我的代码：

  <Route path="/wp-admin/admin.php" element={<PageOne />} >
        <Route path="/wp-admin/admin.php/?id=two" element={<PageTwo />} />
        <Route path="/wp-admin/admin.php/?id=three" element={<PageThree />} />
  </Route>

我想根据查询字符串显示组件 PageTwo 和 PageThree 但它不起作用，我尝试在父路由中使用 :id 但它不起作用，我想我在这里缺少一些基本的东西。

import { useNavigate} from  'react-router-dom';
import React from 'react'
import CustomButton from '../custom-button/custom-button.component';
import './cart-dropdown.styles.scss';
import CartItem from '../cart-item/cart-item.component';
import {connect} from 'react-redux';
import { selectCartItems } from '../../redux/cart/cart.selectors';
import {createStructuredSelector} from 'reselect';

const CartDropDown = ({cartItems }) => {
  return (
    <div className="cart-dropdown">
      <div className="cart-items">
        {cartItems.length
          ? cartItems.map(cartItem =><CartItem key={cartItem.id} item={cartItem} />)
          : <span className="empty-message">Your cart is empty</span>
        }
        <CustomButton onClick{() => window.history.push('/checkout')}>
          GO TO CHECKOUT
        </CustomButton>
      </div>
    </div>
  )
}

const mapStateToProps = createStructuredSelector({
  cartItems: selectCartItems
})

export …

我试图点击路线“/”来渲染 Home 组件。该组件正在渲染，但在控制台上我得到：

react_devtools_backend.js:3973 No routes matched location "/"  
    at Routes (http://localhost:3000/static/js/0.chunk.js:39008:24)
    at Router (http://localhost:3000/static/js/0.chunk.js:38933:30)
    at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:38367:23)
    at App

这是我的App.js文件：

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

import GithubState from "./context/github/GithubState";
import Navbar from "./components/layout/Navbar";
import Home from "./components/pages/Home";
import User from "./components/users/User";
import About from "./components/pages/About";

import "./App.css";

const App = () => {
  return (
    <>
      <Router>
        <Navbar />
        <GithubState>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/user/:username" …

我正在使用带有钩子的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 = …

目标

我正在尝试实现一个看起来像这样的屏幕。有两个菜单，一个是由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-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()) …

最近我升级到了 React 18，从那以后我开始发现一个潜在的问题。请查看以下链接，我在两个不同版本中实现了相同的应用程序。

React 16： https: //codesandbox.io/s/react-16-8-0-forked-5pyqvg ?file=/src/index.js

React 18：https://codesandbox.io/s/Friendly-moore-9yb0xk? file=/src/index.js

正如您所看到的，我将一个点击侦听器附加到文档中。在 React 16 版本中，当我们单击时，正如预期的那样，它会记录以前的状态值，但在 React 18 中，React 能够以某种方式识别更新的状态值并记录当前值。两者中哪一个应该是预期的行为以及它如何比其他方式更好？

如此快速的澄清是因为我已经阅读了之前的一些类似问题：

1. 我希望从正在运行的 Spring 应用程序编译并运行 Spring Boot 代码库。
2. 我不想将多个 Spring Boot jar 嵌套或打包在一个 jar 中。第二个 Spring Boot 代码库位于外部。甚至可能在 github 上。

我已经看过https://www.toptal.com/spring-boot/spring-boot-application-programmatic-launch。它非常有帮助，但我不确定如何编译和加载 Spring Boot 应用程序。

我有一种暗示，这是在 Tomcat TomcatServletWebServerFactory 级别完成的 - 基本上 Spring Boot“helper”应用程序将触发 tomcat 加载外部 jar 并部署。我不能 100% 确定这是否正确。