标签: react-router-dom

如何在有状态组件（类组件）中的 react router 5.1.2 中使用 history.push('path') ？

我找到了这个，但它是无状态组件的解决方案。

import { useHistory } from "react-router-dom";

function App() {
  let history = useHistory();
}

我正在从我的外部 (node_modules) 模式库渲染组件。在我的主应用程序中，我将我的Link实例从react-router-dom我的外部库组件中传递，如下所示：

import { Link } from 'react-router-dom';
import { Heading } from 'my-external-library';

const articleWithLinkProps = {
    url: `/article/${article.slug}`,
    routerLink: Link,
  };

<Heading withLinkProps={articleWithLinkProps} />

在我的库中，它呈现Link如下：

const RouterLink = withLinkProps.routerLink;

<RouterLink
  to={withLinkProps.url}
>
  {props.children}
</RouterLink>

在RouterLink似乎正确渲染，甚至在单击时浏览到的URL。

我的问题是它RouterLink似乎与我的应用程序react-router-dom实例分离。当我点击 时Heading，它会“硬”导航，回发页面，而不是像Link往常一样无缝地路由到那里。

我不确定此时该尝试什么以使其无缝导航。任何帮助或建议将不胜感激，在此先感谢您。

编辑：显示我的路由器是如何设置的。

import React from 'react';
import { hydrate, unmountComponentAtNode } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider …

我有一个使用 MUI 的 React 应用程序，现在我已经使用微调器实现了悬念，它在加载内容时作为后备组件启动。我很想为回退组件添加淡入/淡出过渡，因为目前这种变化太突然了。

我的设置（对于这个特定问题的相关部分）如下：

依赖关系

    "@glidejs/glide": "^3.4.1",
    "@material-ui/core": "4.8.3",
    "@material-ui/icons": "4.5.1",
    "@material-ui/lab": "4.0.0-alpha.39",
    "@material-ui/pickers": "3.2.10",
    "@types/autosuggest-highlight": "^3.1.0",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "autosuggest-highlight": "^3.1.1",
    "connected-react-router": "^6.8.0",
    "history": "^4.10.1",
    "node-sass": "^4.13.0",
    "react": "^16.12.0",
    "react-date-picker": "^8.0.0",
    "react-dom": "^16.12.0",
    "react-feather": "^2.0.3",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-ducks-ts": "^1.0.9",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "styled-components": "^4.4.1",
    "typescript": "~3.7.2"

路由器块

这是应用程序的主要路由器，它有一个RouteWithSubRoutes组件接收路由作为参数并渲染react-render-dom路由组件，但基本上充当路由器切换容器

import React, { FC, Suspense } from "react";
import …

我有这个。它与文档中所说的完全相同。我认为 react-router-dom 模块很好，因为在其他组件中，BrowserRouter、Router 和 Link 对我有用

import { useHistory } from "react-router-dom"
import React from 'react'

export default function HomeButton() {
  let history = useHistory()

  function handleClick() {
    history.push("/home")
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

当我单击按钮时会发生这种情况

类型错误：无法读取未定义的属性“推送”

我是 reactjs 的新手，请帮忙，谢谢

我使用的反应路由器-DOM V4和能够自定义数据发送给使用新的屏幕push(path, state)和replace(path, state)方法“props.history.location”

我要发送的数据恢复到先前的屏幕，但使用不能达到go(n)或goBack()或goForward()。

当我需要将数据发送回上一个屏幕时，如何解决这种情况？

我有一个我使用material-UI设计的Web应用程序,我正在使用Button导航来浏览我的基本着陆页组件.

<div className="footer">
  <BottomNavigation value={value} onChange={this.handleChange} className={classes.root}>
    <BottomNavigationAction label="signal" value="signal" icon={<ShowChart />} className={classes.content}/>
    <BottomNavigationAction label="hotlist" value="hotlist" icon={<HotList />} className={classes.content}/>
    <BottomNavigationAction label="analyze" value="analyze" icon={<PieChart />} className={classes.content}/>
    <BottomNavigationAction label="learn" value="learn" icon={<LibraryBooks/>} className={classes.content}/>
    <BottomNavigationAction label="dashboard" value="dashboard" icon={<PermIdentity/>} className={classes.content}/>
  </BottomNavigation>
  </div>

我尝试使用React-Router与这些预先定义的导航组件,但这不起作用,是否有任何可能的方法使用物料UI的按钮导航路由器？material-UI ButtonNavigation API中的按钮导航文章

我在构建多租户 SaaS 解决方案时遇到问题。对于每个租户，我希望他们使用子域，这样我就可以从 url 获取子域，调用返回有关该租户的数据的 REST api。

例如，

1. 管理员（完全是另一个应用程序 - 管理应用程序）创建一个域名为 的租户：tenant1。
2. 在本地系统上的租户应用程序中，我能够访问tenant1.localhost:3000. 我获取了 url，并获取了域名。然后，我与域进行调用以获取租户的主题（这存储在 localStorage 中）。

不幸的是，我们在我的公司部署在 k8 上，所以我无法模仿这种行为。因此，devOps 团队建议我在上下文中使用子域，从而拥有localhost:3000/tenant1. 请记住，租户是动态的，所以我尝试了以下方法：

<BrowserRouter basename={"/:tenant"}>
    <Switch>
        <Route exact path="/login" name="Login" component={Login} />
        <Route exact path="/set-password/:token" name="Set Password" component={SetPassword} />
        <PrivateRoute path="/" name="Default Layout" component={DefaultLayout} /> 
    </Switch>              
</BrowserRouter>

然而，上面的解决方案使我的 url 为 localhost:3000/:tenant/login

请问我如何在路由器中使用动态基本名称，以便它可以接受：

localhost:3000/tenant1 localhost:3000/tenant3 localhost:3000/tenant2ETC。

它可以允许任何，我的应用程序处理输入的错误域

import styled from 'styled-components';
import {Link} from 'react-router-dom';

const LS = {};

LS.NavFixedItem_LINK = styled(Link)`

  display: flex;
  justify-content: ${props => props.tempLeftProp ? 'flex-start' : 'center'};
  align-items: center;
`;

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK to={props.link} tempLeftProp={props.toLeft}>
      {props.name}
    </LS.NavFixedItem_LINK>
  );
}

我收到错误：

警告： React 无法识别tempLeftPropDOM 元素上的prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写templeftprop。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。

我一直将道具传递给我的样式组件。我不知道问题是否在于我正在为组件Link而不是常规 HTML 元素设置样式。

题

为什么我收到这个错误？忽略它是否安全？

PS：正在按预期应用样式。

我正在尝试像标签面板一样使用 AntD 菜单侧边。

我想将组件放在内容中，以便在单击菜单项时内容面板呈现相关组件。

如何让这种结构将组件作为每个菜单项的内容？

import React from 'react';
import { compose } from 'recompose';
import { Divider, Layout, Card, Tabs, Typography, Menu, Breadcrumb, Icon } from 'antd';
import { PasswordForgetForm } from '../Auth/Password/Forgot';


const { Title } = Typography
const { TabPane } = Tabs;
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;


class Dashboard extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed …

我正在使用react-router v6，是否可以在不使用Outlet组件的情况下使用嵌套路由？

例如：我有一个用户页面和 onClick 用户组件，它应该导航到特定的用户页面，

当前尝试：

 <Routes>
   <Route path="/" element={<Home />} />
   <Route path="/users" element={<Users />} />
     <Route path=":id" element={<UserPage/>} />
 </Routes>

然后单击特定用户：

const gotoUserPage = () => {
  navigate('1')
}

gotoUserPage 将 URL 从“/users”更改为“/users/1”，但 userPage 组件不会呈现。