制作自定义 url /myadmin 以安装和使用 react-admin 应用程序

Question

我正在使用 react-admin 为网上商店构建管理面板。所以我希望所有 react-admin 都在链接下，例如 http://localhost:8000/myadmin

问题是 react-admin 中的所有路由默认情况下都是 http://localhost，所以当我点击左侧的产品时（看图片）应用程序将我带到页面 http://localhost/ product 而不是 http://localhost/myadmin/products 或者当我单击仪表板时，它会将我带到 http://localhost 而不是 http://localhost/myadmin

这是我定义 /myadmin 路由的 app.js 文件

ReactDOM.render(
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Homepage} />
        <Route path="/display-item" component={DisplayProduct} />
        <Route path="/product/:id" component={OneProduct} />
        <Route path="/checkout" component={CheckOut} />
       <Route path="/myadmin" component={myAdmin}/>  
      </Switch>
    </BrowserRouter>,
  document.getElementById('crud-app'),
);

我正在调用应用程序的 myAdmin.js 文件

import React from 'react';
import { Admin, Resource,ListGuesser,fetchUtils,EditGuesser } from 'react-admin';
import UserList from './users';
import { createBrowserHistory as createHistory } from 'history';
import simpleRestProvider from 'ra-data-simple-rest';
import Dashboard from './dashboard';
import NotFound from './notFound';
import customRoutes from './customRoutes';
import OrderList from './orderList';
import CustomerList from './CustomerList';
import ProductList from './ProductList';
import { ProductCreate, ProductEdit } from './EditProduct';
import authProvider from './authProvider';

const history = createHistory({ basename: '/myadmin' });

const dataProvider = simpleRestProvider('http://localhost:8000');

function myAdmin() {
  return (
    <Admin customRoutes={customRoutes} authProvider={authProvider} catchAll={NotFound} dashboard={Dashboard} history={history} dataProvider={dataProvider}>
    <Resource name="users" list={UserList} />
    <Resource name="orders" list={OrderList} />
    <Resource name="customers" list={CustomerList} />
    <Resource name="product" list={ProductList} edit={ProductEdit} />
    

</Admin>
  );
}

export default myAdmin;

我还定义了 customRoutes.js

export default [
    <Route exact path="/myadmin/users" component={UserList} />,
    <Route exact path="/myadmin/orders" component={OrderList} />,
    <Route exact path="/myadmin/customers" component={CustomerList} />,
    <Route exact path="/myadmin/products" component={ProductList} />,
    <Route exact path="/myadmin/products/:id" component={ProductEdit} />,
    <Route exact path="/myadmin" component={dashboard} />,
    <Route exact path="/myadmin/login" component={Login} noLayout />,
];

任何人都知道如何将 /myadmin 设置为 react admin 的启动 url，因此每条路径都只是添加 /myadmin

Answer 1

这很奇怪。

您可以考虑从 customRoutes 中删除所有已内置在 react-admin 中的 <Route /> 组件：

export default [
    <Route exact path="/myadmin/login" component={Login} noLayout />,
];

我能想到的唯一另一件事是在您的历史记录中正确配置baseName。不过看起来你做得对。