CODEWITHSUNDEEP
reactjsreact-admin
HardRock
HardRock

Reputation: 1091

Make custom url /myadmin for mounting and using react-admin app

I am using react-admin for building admin panel for web shop. So I want that all react-admin is under link e.g http://localhost:8000/myadmin

The problem is that all routes in react-admin are by default http://localhost, so when I click on products on the left side (look at the image) app is taking me on page http://localhost/product instead of http://localhost/myadmin/products or when I click to dashboard it takes me on http://localhost instead of http://localhost/myadmin

enter image description here

This is my app.js file in which I defined /myadmin route

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 file where I am calling app

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;

Also I defined 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 />,
];

Anyone idea how to make /myadmin as started url for react admin so every path is just adding /myadmin

Upvotes: 0

Views: 1604

Answers (1)

Huston Hedinger
Huston Hedinger

Reputation: 511

That is strange.

You might consider removing all <Route /> components from customRoutes that are already built into react-admin:

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

The only other thing I can think of is properly configuring baseName in your history. Looks like you did it correctly though.

Upvotes: 1

Related Questions