All of my routes include a hashtag after the host before the resource, host.com/#/resource, any idea what I might have done to cause this?

Some examples of how my admin and resources are configured:

<Admin
    dashboard={Dashboard}
    dataProvider={dataProvider}
    appLayout={MainLayout}
    title="Removed So I Don't Get Fired"
  >
    <Resource name="apples" list={ApplesList} />
    <Resource name="pears" list={PearsList} show={PearShow} />
    <Resource name="peaches" list={PeachesList} create={PeachesCreate} edit={PeachesEdit}/>
  </Admin>

the routes that work are all:

host.com/#/apples
host.com/#/pears
host.com/#/pears/pearnumber/show

etc...

If I try to visit:

host.com/apples
host.com/pears
host.com/pears/pearnumber/show

The browser is redirected to:

host.com/apples#/
host.com/pears#/
host.com/pears/pearnumber/show#/

Let me know if you need anything additional information.

Solution

This sounds similar to https://stackoverflow.com/a/49158969/1941654. I'm not a React expert, but a crucial component of PushState API routing is that the page must base all routes off of a base URI. If no base URI is specified, then libraries will tend to use the original URI accessed as the base URI.

If you were using the PushState API, then I would suggest that you add <base href="/" /> to your page <head>. This would indicate to your page that all paths are relative to the root of the host. However, it looks like you're just using hash-based routing (though still aliasing all subpaths of host.com to your page). Hash-based routing is unable to change the URI path, so you will not be able to get host.com/apples to redirect to host.com/#/apples with your current setup.

I suggest changing the routing strategy to use the PushState API instead: https://github.com/marmelab/react-admin/blob/master/docs/Admin.md#history. This, combined with the <base> tag mentioned above, will allow your page to use the root URI as its base URI and fix routing when navigating directly to a route.

The above link suggests using the history npm package to create a history configuration (in this case using the createBrowserHistory function) and then attach it to the Admin node as follows:

import createHistory from 'history/createBrowserHistory';

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

const App = () => (
    <Admin history={history}>
        ...
    </Admin>
);