<CustomRoutes>
To register your own routes, pass one or several <CustomRoutes>
elements as children of <Admin>
. Declare as many react-router-dom <Route>
as you want inside them.
Alternatively, you can add your custom routes to resources. They will be available under the resource prefix.
// in src/App.js
import * as React from "react";
import { Admin, Resource, CustomRoutes } from 'react-admin';
import { Route } from "react-router-dom";
import simpleRestProvider from 'ra-data-simple-rest';
import posts, { PostAnalytics } from './posts';
import comments from './comments';
import Settings from './Settings';
import Profile from './Profile';
const App = () => (
<Admin dataProvider={simpleRestProvider('http://path.to.my.api')}>
<Resource name="posts" {...posts}>
<Route path="analytics" element={<PostAnalytics/>} />
</Resource>
<Resource name="comments" {...comments} />
<CustomRoutes>
<Route path="/settings" element={<Settings />} />
<Route path="/profile" element={<Profile />} />
</CustomRoutes>
</Admin>
);
export default App;
Now, when a user browses to /settings
or /profile
, the components you defined will appear in the main part of the screen.
Tip: To look like other react-admin pages, your custom pages should have the following structure:
// in src/Settings.js
import * as React from "react";
import { Card, CardContent } from '@mui/material';
import { Title } from 'react-admin';
const Settings = () => (
<Card>
<Title title="My Page" />
<CardContent>
...
</CardContent>
</Card>
);
export default Settings;
Tip: It’s up to you to create a custom menu entry, or custom buttons, that lead to your custom pages.
If you want a custom route to render without the layout (without the menu and the appBar), e.g. for registration screens, then provide the noLayout
prop on the <CustomRoutes>
element:
// in src/App.js
import * as React from "react";
import { Admin, CustomRoutes } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';
import { Route } from "react-router-dom";
import Settings from './Settings';
import Register from './register';
const App = () => (
<Admin dataProvider={simpleRestProvider('http://path.to.my.api')}>
<CustomRoutes noLayout>
<Route path="/register" element={<Register />} />
</CustomRoutes>
<CustomRoutes noLayout>
<Route path="/settings" element={<Settings />} />
</CustomRoutes>
</Admin>
);
export default App;
When a user browses to /register
, the <Register>
component will appear outside the defined Layout, leaving you the freedom to design the screen the way you want.
Tip: Custom routes can be a <Navigate>
route, too.