Почему строка меню response-admin не перенаправляет меня на правильный просмотр ресурсов? - PullRequest
Новая
       49

Почему строка меню response-admin не перенаправляет меня на правильный просмотр ресурсов?

0 голосов
/ 14 июля 2020

Я создал песочницу для этой проблемы: https://codesandbox.io/s/react-admin-menu-problem-s4jfl?file= / src / Admin. js при нажатии введите https://s4jfl.csb.app/# / AdminPanel в строку поиска и нажмите на ресурс users, он вернет ошибку.

Я создаю панель администратора для своего приложения реакции с помощью response-admin. До вчерашнего дня все работало отлично. Я не использовал ни Custom AppBar, ни Provider. Когда я нажимаю на меню, URL-адрес в веб-браузере изменяется, но страница не перенаправляется. Мое приложение невелико, поэтому я не использовал response-redux.

Например, когда я нажимаю Categories на своей панели инструментов, URL-адрес изменяется с http://localhost:3000/AdminPanel/ на http://localhost:3000/AdminPanel/#/Categories, а в консоли отправляет предупреждение: 

Uncaught Could not find router reducer in state tree, it must be mounted under "router"

Несмотря на изменение URL-адреса, содержимое страницы по-прежнему остается на dashboard. Но когда я нажимаю на URL-адрес и нажимаю клавишу ВВОД, страница обновляется и содержимое является правильным.

enter image description here

Thanks in advance.

Admin.js

import React from "react";
import { Admin, Resource } from "react-admin";
import {
  FirebaseDataProvider,
  FirebaseAuthProvider,
} from "react-admin-firebase";

import {
  CategoryList,
  CategoryCreate,
  CategoryEdit,
  CategoryShow,
} from "./Pages/categories";
import {
  ProductList,
  ProductCreate,
  ProductEdit,
  ProductShow,
} from "./Pages/products";
import {
  OptionsList,
  OptionEdit,
  OptionCreate,
  OptionShow,
} from "./Pages/options";
import { ResponseList, ResponseShow } from "./Pages/responses";
import Dashboard from "./Pages/Dashboard";
import CustomLoginPage from "./Login/CustomLoginPage";
import Category from "@material-ui/icons/Category";
import ShoppingCart from "@material-ui/icons/ShoppingCart";
import LibraryBooks from "@material-ui/icons/LibraryBooks";
import QuestionAnswerIcon from "@material-ui/icons/QuestionAnswer";

const config = {
  apiKey: "XXXXXXXXX",
  authDomain: "xxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxx",
  storageBucket: "xxxxxxxxxxx.appspot.com",
  messagingSenderId: "00000000000",
  appId: "1:123456789:web:qiwehw9e8jafiuqdeqiqn",
  measurementId: "X-XXXXXXXX",
};

const options = {};

const dataProvider = FirebaseDataProvider(config, options);
const authProvider = FirebaseAuthProvider(config, options);

const AdminPanel = () => (
  
    
    
    
    
  
);

export default AdminPanel;

CustomLoginPage

import React from "react";
import { Login, LoginForm } from "react-admin";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import firebase from "firebase";
import ForgotPasswordButton from "./CustomForgotPassword";

const uiConfig = {
  signInFlow: "popup",
  signInSuccessUrl: "#/",
  signInOptions: [],
};

const SignInScreen = () => (
  
);

const CustomLoginForm = (props) => (
  
    
    
    
  
);

const CustomLoginPage = (props) => (
  
    
  
);

export default CustomLoginPage;

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Route, BrowserRouter as Router } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";
import AdminPanel from "./Admin/Admin";

ReactDOM.render(
   , document.getElementById ("root")); serviceWorker.unregister ();

пакет. json

{
  "name": "xxxxxxxx",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "dependencies": {
    ...
    "@testing-library/jest-dom": "^5.10.1",
    "@testing-library/react": "^10.3.0",
    "@testing-library/user-event": "^12.0.2",
    ...
    "firebase": "^7.15.2",
    ...
    "react": "^16.13.1",
    "react-admin": "^3.7.1",
    "react-admin-firebase": "^3.2.1",
    "react-dom": "^16.13.1",
    "react-firebaseui": "^4.1.0",
    ...
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.0",
    ...
    "react-test-renderer": "^16.13.1",
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "https://asia-east2-xxxxxxxxxx.cloudfunctions.net/api"
}

Отредактировано: Пример: когда я нажимаю в меню на category вот что я вижу: enter image description here And this is what I expect to see: введите описание изображения здесь Спасибо

Включенный код для категорий: Это происходит не только для категорий, но и для всех страниц ресурсов. Насколько я знаю, react-admin автоматически поможет мне связать все мои страницы ресурсов с меню, чтобы пользователь перенаправлялся при щелчке мышью, что также касается меня до того, как это произошло. Поскольку я не создавал настраиваемое меню (AppBar), а просто использовал меню по умолчанию, все должно работать нормально, однако похоже, что что-то происходит с меню, которое меняет только URL-адрес (в веб-браузере), но не перерисовывает приложение (админку) для пользователя? Категории. js

import React from "react";
import {
  List,
  Datagrid,
  TextField,
  EditButton,
  Create,
  TextInput,
  SimpleForm,
  Edit,
  Filter,
  ShowButton,
  DeleteButton,
  SimpleShowLayout,
  DateField,
  Show,
  RichTextField,
  NumberInput,
  NumberField,
} from "react-admin";

const CategoryTitle = ({ record }) => {
  return <span>Category {record ? `"${record.name}"` : ""}</span>;
};

const CategoryFilter = (props) => (
  <Filter {...props}>
    <TextInput label="Search" source="name" alwaysOn />
  </Filter>
);

export const CategoryList = (props) => (
  <List
    filters={<CategoryFilter />}
    {...props}
    title="Categories(Questions) for the Quiz"
    sort={{ field: "index", order: "ASC" }}
  >
    <Datagrid>
      {/* <TextField source="index" /> */}
      <TextField source="name" />
      {/* <TextField source="id" /> */}
      <RichTextField label="Description" multiline="true" source="body" />
      <NumberField source="index" />
      <ShowButton />
      <EditButton />
      <DeleteButton redirect={false} />
    </Datagrid>
  </List>
);

export const CategoryShow = (props) => (
  <Show title={<CategoryTitle />} {...props}>
    <SimpleShowLayout {...props}>
      <TextField source="id" />
      <TextField source="name" />
      <RichTextField label="Description" multiline="true" source="body" />
      <NumberField source="index" />
      <DateField source="lastupdate" showTime />
      <TextField source="updatedby" />
    </SimpleShowLayout>
  </Show>
);
export const CategoryEdit = (props) => (
  <Edit title={<CategoryTitle />} {...props}>
    <SimpleForm>
      <TextInput disabled source="id" />
      {/* <TextInput disabled source="index" /> */}
      <TextInput source="name" />
      <TextInput label="Description" source="body" />
      <NumberInput source="index" step={1} min="1" />
    </SimpleForm>
  </Edit>
);

export const CategoryCreate = (props) => (
  <Create {...props}>
    <SimpleForm>
      {/* <TextInput source="index" /> */}
      <TextInput source="name" />
      <TextInput label="Description" source="body" />
      <NumberInput source="index" step={1} min="1" />
    </SimpleForm>
  </Create>
);
...