Question

我已经用React-Router-DOM设置了一个AppRouter。版本4。我有一张表，上面附有链接，每个表我都从服务器获取数据。单击表中的链接时，我想查看每个项目的详细信息屏幕。那是行不通的。

下面是AppRouter ，它是应用程序的路由器。仅供参考，所有其他路线都运行良好：

import React from 'react';
import PropsTypes from 'prop-types';
import { withProps } from 'recompose';
import ReactRouterPropTypes from 'react-router-prop-types';
import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import { Authorization } from 'util/viewPermissionUtil';
import { Permission } from 'util/permissionsUtil';
import permissions from 'constants/roles';

import GroupDetailsScreen from 'GroupDetailsScreen';
import GroupsScreen from 'GroupScreen';
import UsersScreen from 'containers/UserScreen';

const GetUser = Authorization(({ user }) =>
  Permission(user, [permissions.somepermission])
);

const AuthUsers = GetUser(
  ({ ...props }) => <UsersScreen {...props} />,
  () => <Redirect to="/" />
);

const GetGroupsDetails = Authorization(({ user }) =>
  Permission(user, [permissions.someOtherPermissions])
);

const AuthGroupDetails = GetGroupsDetails(
  ({ ...props }) => <GroupDetailsScreen {...props} />,
  () => <Redirect to="/" />
);

const UsersRoute = ({ user }) => withProps({ user })(AuthUsers);
const GroupDetailsRoute = ({ user }) => withProps({ user })(AuthGroupDetails)

const Router = ({ match: { path }, user }) => (
  <Switch>
    <Route path={`${path}/groups`} component={GroupsScreen} />
    <Route path={`${path}/groups/details/:name`} component={GroupDetailsRoute({ user })} />
    <Route path={`${path}/users`} component={UsersRoute({ user })} />
    <Redirect to={`${path}/users`} />
  </Switch>
);

Router.propTypes = {
  match: ReactRouterPropTypes.match.isRequired,
  user: PropsTypes.object
};

function mapStateToProps(state) {
  return {
    user: state.auth.user
  };
}

const ConnectedRouter = connect(mapStateToProps)(Router);
const AppRouter = withRouter(({ ...props }) => <ConnectedRouter {...props} />);

export default AppRouter;

在TableConfig组件中，它是“表”列的配置文件：

function groupNameRenderer(cell, row) {
  return (
    <span className="text-align-left">
      <Link
        to={{
          pathname: `/groups/details/${row.name}`
        }}
      >
        {cell}
      </Link>
    </span>
  );
}

export const columns = [
  {
    dataField: 'name',
    sort: false,
    text: 'Group',
    formatter: groupNameRenderer,
  },
  {
    dataField: 'field',
    sort: true,
    text: 'FIELD'
  },
  {
    dataField: 'someField',
    sort: true,
    text: 'SOME FIELD'
  }
];

在服务文件中，该文件将端点调用到服务器：

import { endpointInstance } from 'services/httpFactory';
import httpMethod from 'constants/httpMethod';

import endpoint from './endpoint';

export const getGroup = name => {
  const options = {
    method: httpMethod.GET,
    url: endpoint.GET_GROUP(name)
  };
  return endpointInstance(options);
};

我的意思是这是什么问题。我真的一点都不明白。我尝试了几种不同的情况。

尽管路由器在App链DIDN'T WORK中的位置较高，但我尝试在AppRouter中手动插入BrowserRouter。

我尝试将终结点数据作为常量文件手动插入。无需进行API调用，DIDN'T WORK。

我得到URL，改变了一秒钟，但是刷新后，它确实回到了/。我真的很沮丧。我在两个不同的实例中以相同的方法实现了相同的体系结构。工作完美。一模一样。

我的应用基于React/Redux/Redux-Observable构建，用于异步操作。另一个注意事项。我也将getGroup服务传递给我的GroupDetailsScreen，以获取数据或错误消息，但是问题出在路由器上。我在groupName上得到了URL，但是由于某种原因而被重定向。发生了什么事？

我刚刚发现的一个小更新。看来，react-router-dom的URL删除了一个参数。我的意思是这个。

在TableOverview屏幕上，URL为localhost:3000/something/groups，

但是，当我单击链接时，它会转到localhost:3000/groups/details/name。 **

我在Github上读过有关此问题的信息：https://github.com/ReactTraining/react-router/issues/5870，尚未找到可靠的解决方案。但是我可以在这里添加something：

pathname: `something/groups/details/${row.name}`

这是一个非常奇怪的解决方案，我不愿意继续。敌人的发展很好，但是我实际上需要找到解决方案。欢迎任何输入。

有人可以告诉我我在这里做什么愚蠢的事情，但是没有用。谢谢！！

React-Router-DOM | URL被重定向到根路径

0 个答案: