标签: react-router-v4

我是新的反应世界并添加了路由器v4但无法实现反应角色基础授权.让我知道是否有任何来源让我采取正确的方式.

我正在使用React-Router v4的Match对象将params传递给下一个组件.我的路由就像:

<Switch>
  <Route exact path="/" component={ExperimentListPage} />
  <Route path="/experiment/:experiment" component={ExperimentResultsPage} />
</Switch>

我的子组件看起来像:

const ExperimentResultsPage = props => (
   <ExperimentResultsContainer experimentName={props.match.params.experiment} />
);

export default withRouter(ExperimentResultsPage);

这一切都按预期工作,但是ESLint对我的使用非常不满意,match.params.experiment并且错误[eslint] 'match.params.experiment' is missing in props validation (react/prop-types)

我在React文档中看到我可以使用PropTypes.shape我的params对象,但我希望有更好的方法,特别是因为Match对象包含很多字段.

有没有更好的方法将Match路径对象添加到道具验证？那会是什么样子？如果没有,我是否错过了其他可以帮助解决此问题的方法？

我对使用React Router和常规条件渲染方法之间的核心差异(特别是关于性能)感到困惑.我的意思是"常规条件渲染方法",例如:

我们可以在父组件中设置一个状态,并将其作为子组件的道具传递,我们有条件地更新这种状态取决于要求,并且子组件将重新渲染,因为不同的内容取决于它的道具.

我认为它可以实现与使用React路由器完全相同的目标,那么为什么我们仍然需要React路由器？使用反应路由器会带来更好的性能体验还是什么(假设我们不需要历史记录功能)？

请在标记为重复之前正确阅读此内容，我向您保证我已经阅读并尝试了每个人在 stackoverflow 和 github 上提出的有关此问题的所有建议。

我的应用程序中有一条路由，如下所示；

<div>
        <Header compact={this.state.compact} impersonateUser={this.impersonateUser} users={users} organisations={this.props.organisations} user={user} logOut={this.logout} />
        <div className="container">
            {user && <Route path="/" component={() => <Routes userRole={user.Role} />} />}
        </div>
    {this.props.alerts.map((alert) =>
            <AlertContainer key={alert.Id} error={alert.Error} messageTitle={alert.Error ? alert.Message : "Alert"} messageBody={alert.Error ? undefined : alert.Message} />)
        }
    </div>

路由渲染Routes呈现一个切换用户角色的组件，并根据该角色延迟加载正确的路由组件，该路由组件为主页呈现一个开关。简化后如下所示。

import * as React from 'react';
import LoadingPage from '../../components/sharedPages/loadingPage/LoadingPage';
import * as Loadable from 'react-loadable';

export interface RoutesProps {
    userRole: string;
}

const Routes = ({ userRole }) => { …

我是新手，我正在尝试将一些数据作为参数发送到history.push.

基本上，我在单击按钮时调用一个方法，并在该方法内调用一个 api。如果我收到成功响应，我将重定向到其他页面，并且还需要传递一些数据。

下面是我的代码：

class Login extends Component  {

  constructor(props) {
    super(props);
    this.state = {
      enteredName: null,
      enteredPwd: null,
      rescode: null,
      userName: null,
      formatDesc: null,
      userFormat : null,
      success: false,
      responseJson : null,
    };
  }

  state = {
    enteredName: null,
    enteredPwd: null,
    rescode: null,
    userName: null,
    formatDesc: null,
    userFormat : null,
    success: false,
    responseJson : null,
  }
    render=() =>{

        return (
          <Router>
          <div id= "login-page">
            <div className="back-image" style={{height:"100vh"}}>
              <div className="container">
                <form className="form-login" action="index.html">
                  <h2 className="form-login-heading">sign in now</h2>
                  <div …

我创建了一个存储库,其中包含一个基本示例,如果有帮助,会触发此错误:

可加载组件-SSR

我试图使用可装载组件的SSR成立了react-router-dom 4.3.1,loadable-component 5.6.0并react-dom 16.8.1

这是我正在尝试应用的组件示例loadable-component:

import React from "react";

const About = () => <h2>About</h2>;

export default About;

这是在App组件中导入的,如下所示:

import loadable from "@loadable/component";
...
const About = loadable(() => import("./About"));

并作为道具传递到Route同一个App组成部分:

<Route path="/about/" component={About} />

但是我在Developer Tools控制台中不断收到以下警告:

警告:失败的道具类型:提供component的类型的无效道具,预期objectRoutefunction

如果我使用第一个答案中建议的替代语法:

<Route path="/about/" component={props => <About {...props} />} />

警告消失,但/about单击链接时仍然出现错误的路径:

Uncaught Error: Loading chunk About failed.
(missing: http://localhost:3000/about/About.bundle.js) …

当我在服务器端呈现同步路由，然后客户端对 dom 进行水合时，我收到警告，因为客户端异步路由找不到组件。

另一方面，反应纤维和解试图去除这个不可水合的节点。所以该页面在客户端产生一个空白的闪光:(

根据下一个屏幕截图，服务器端渲染生成的节点将被删除。这个节点（div.home-page）是当前路由的动态组件

那么，如何告诉reconciler不要移除这个节点，因为它会被动态导入的对应组件补水呢？

一些代码片段以获得更多解释

路线定义

import {
  HomePage,
} from '../bundles/Bundles';

export default [
  {
    component: HomePage,
    path: '/',
    exact: true,
    strict: true,
  },
];

服务器端使用的 Bundles.js

export const HomePage = syncComponent('HomePage', require('../views/HomePage/HomePage'));

客户端使用的 AsyncBundles.js

export const HomePage = asyncComponent('HomePage', () => Promise.all([
  import('../views/HomePage/HomePage' /* webpackChunkName: 'HomePage' */),
  importCss('HomePage'),
]));

感谢NormalModuleReplacementPlugin webpack 插件，我可以从 Bundles.js 和 AsyncBundles.js 切换到服务器和客户端渲染

new webpack.NormalModuleReplacementPlugin(/Bundles\.js/, 'AsyncBundles.js')

HomePage.js 组件渲染一个简单的 div

<div className="home-page">Home Page</div>

渲染路由的主要 Wrapper.js

  <Route
    render={({ location }) => (
      <div className="app__wrapper"> …

我正在设置这样的基本名称路径：

<BrowserRouter basename="/calendar"/>

是否可以通过 React Router 以某种方式访问​​任何应用程序组件中的 basename 属性？否则我需要解析 Location 对象。

我看过那个history物体，但在那里找不到。

我有使用 React 和 React Router 编写的 webapp。

使用 window.location.href 重定向与使用通过 react-router 提供的组件有什么优缺点吗？

我正在使用 React Router v5。

我遇到了需要支持以下用例的情况。

我有通过 访问的 React 组件/project/1234。/project/1234/hello但是，我还需要通过两者访问同一个 React 组件，/project/1234/goodbye.同样，所有这三个路由都需要导航到同一个 React 组件。

以下代码不起作用，因为据我所知，如果我导航到/project/1234/goodbye，react-router 会将其解释为我将“再见”作为参数的值传递，因此如果我使用react-router 的钩子:hello以编程方式询问参数useParams()本身，我就会得到错误的参数值。

<Route
   path={'project/:context/:hello?/:goodbye?'}
   render={matchProps => <Project {...matchProps}/>}
/>

换句话说，如果导航到/project/1234/goodbye然后执行以下操作：

const params = useParams()
console.log(params.hello)

params.hello将返回“再见”

同样，这不起作用，因为使用数组/project/1234/goodbye总是首先匹配/project/1234，因此我不会使用useParams()react-router提供的钩子获得任何传递的参数。

<Route
   path={['project/:context', 'project/:context/:hello?', 'project/:context/:goodbye?']}
   render={matchProps => <Project {...matchProps}/>}
/>

我可以这样：

<Route
   path={'project/:context'}
   render={matchProps => <Project {...matchProps}/>}
/>

但是，当我使用react-router的useParams()钩子时，我将无法询问参数:goodbye或:hello

有人知道如何使用 React Router 来实现这一点吗？或者我只需要声明单独的路线？