React Admin: I'd like to route to <Show> view from a list

Question

I'm currently using react admin.
I would like to route to my ActivityShow component when I click a row in the Resource list.

When I click the row, the app routes to http://localhost:3000/#/activity/music_lesson/1 which is the empty route. It doesn't show my item detail.

My ActivityShow component is actually rendered at this route: http://localhost:3000/#/activity/music_lesson/1/show by default.

Do I have to create custom react route?
Or is there any other options for that?

Here is my App.js file

// in src/App.js
import React from 'react';
import { Admin, Resource, ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import {ActivityList} from './components/activity';
import {ActivityCreate} from './components/activity'
import DataProvider from './dataProvider/dataProvider'
import {ActivityShow} from './components/activity';

    const App = () => (
          <Admin dataProvider={DataProvider}>
               <Resource 
               name="activity/music_lesson" 
               options={{ label: 'Music Lesson' }} 
               list={ActivityList} 
               create={ActivityCreate}
               show={ActivityShow}
          />
              <Resource 
              name="activity/art_theraphy" 
              options={{ label: 'Art Theraphy' }} 
              list={ActivityList}
              create={ActivityCreate}
              show={ActivityShow}
               />
              <Resource 
              name="activity/relaxing_music" 
              options={{ label: 'Relaxing Music' }} 
              list={ActivityList} 
              create={ActivityCreate}
              show={ActivityShow}
              />
              <Resource 
              name="activity/stayfit_video" 
              options={{ label: 'Stayfit Video' }} 
              list={ActivityList}
              create={ActivityCreate}
              show={ActivityShow}
              />
          </Admin>
    );

    export default App;

Answer 1

In my own code I ran into this situation, and figured out you can add the link prop with a value show to direct to the show route.

<ReferenceField source="id" reference="accounts" link="show">
    <TextField source="name"/>
</ReferenceField>

Answer 2

Inside your import {ActivityList} from './components/activity'; you will have something similar to the following:

import React, { ReactElement } from "react";
import { List, Datagrid, TextField, NumberField } from 'react-admin';
import { ActivityListProps } from "./ActivityList.interface";


const ActivityList = (props: ActivityListProps): ReactElement => {
  return (
    <List {...props}>
        {/* change the rowClick from edit -> show */}
        <Datagrid rowClick="show">
            <TextField source="id" />
            <TextField source="description" />
            <TextField source="name" />
        </Datagrid>
    </List>
  );
};

export default ActivityList;

Simply change the <DataGrid rowClick="edit"> to <DataGrid rowClick="show">.