Browser Router 사용하기 (HashRouter 제거하기)

[ucharles]

적용방법

<BrowserRouter>로 <Admin>을 감싸면 된다.

import { BrowserRouter } from 'react-router-dom';
import { Admin, Resource } from 'react-admin';

const App = () => (
    <BrowserRouter>
        <Admin dataProvider={...}>
            <Resource name="posts" />
        </Admin>
    </BrowserRouter>
);

참고

https://marmelab.com/react-admin/doc/4.0/Routing.html#using-a-custom-router

[yypp1226]

다른 패스를 BrowserRouter로 사용하려면 Admin 의 basename prop이 필요합니다. (모든 루트에 basename을 달고다녀야함)

간단하게 history로 해결하는게 나을 것 같습니다. Admin의 HashRouter를 덮어쓰기하는 방식.

참조

https://marmelab.com/react-admin/Admin.html#history

[ucharles]

react-admin v4부턴 history의 props가 더이상 사용되지 않습니다. 버전 v4의 문서를 참조해 주세요.

<Admin>의 props였던 history를 <BrowserRouter>로 대체해야 합니다.

https://marmelab.com/react-admin/doc/4.0/Admin.html#history

[yypp1226]

안정화된 버전 사용이 낫지 않을까 생각합니다. BrowserRouter로 단순히 랩핑할경우, Router중복 에러가 뜹니다.

bundle.js:172478 Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
    at invariant (bundle.js:172478:20)
    at Router (bundle.js:173295:36)
    at renderWithHooks (bundle.js:148782:22)
    at mountIndeterminateComponent (bundle.js:151544:17)
    at beginWork (bundle.js:152743:20)
    at HTMLUnknownElement.callCallback (bundle.js:137732:18)
    at Object.invokeGuardedCallbackDev (bundle.js:137781:20)
    at invokeGuardedCallback (bundle.js:137841:35)
    at beginWork$1 (bundle.js:157583:11)
    at performUnitOfWork (bundle.js:156419:16)

history도 버전호환만 되면 사용가능하니 문제 없을 것 같습니다.

[ucharles]

react-admin v4를 사용한 이유는 MUI v5 사용하기 위함입니다. react-admin v3.xx 는 MUI v4를 사용합니다. (전부 고쳐야 합니다...)

저도 <BrowserRouter> 를 적용해 보았는데 에러 없이 정상작동을 합니다만, 코드 첨부를 부탁드려도 될까요?

[yypp1226]

굳이 버전 낮추지 않아도 history 사용은 가능합니다 일단 에러 발생하는 코드 드릴게요

import { React } from "react";
import { PostList } from "./users/pages/Posts";
import { Route, BrowserRouter } from "react-router-dom";
import MyLayout from "./layout/MyLayout";
import { Admin, Resource, CustomRoutes } from "react-admin";
import AuthProvider from "./users/controllers/AuthProvider";
import { Dashboard } from "./layout/Dashboard";
import SigniInSide from "./users/pages/SignInSide";
import SignUp from "./users/pages/Signup";
import CreateCalendar from "./calendars/pages/CreateCalendar";
import AddEvents from "./calendars/pages/AddEvents";
import EditEvents from "./calendars/pages/EditEvents";
import JoinCalendar from "./calendars/pages/JoinCalendar";
import EditCalendars from "./calendars/pages/EditCalendars";
import jsonServerProvider from "ra-data-json-server";
import UserSetting from "./users/pages/UserSetting";
//import { createBrowserHistory as createHistory } from "history";
const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

//const history = createHistory();
const App = () => (
  <BrowserRouter>
    <Admin
      //history={history}
      layout={MyLayout}
      loginPage={SigniInSide}
      title={process.env.REACT_APP_TITLE}
      dashboard={Dashboard}
      authProvider={AuthProvider}
      dataProvider={dataProvider}
      checkPermissions={true}
    >
      {(permissions) => [
        <CustomRoutes>
          <Route exact path="/calendar/:id" element={<SignUp />} />
          <Route exact path="/calendar/new" element={<CreateCalendar />} />
          <Route exact path="/calendar/event" element={<AddEvents />} />
          <Route exact path="/calendar/edit" element={<EditEvents />} />
          <Route exact path="/calendar/:id/:date" element={<SignUp />} />
          <Route exact path="/settings" element={<UserSetting />} />
          <Route exact path="/calendar/join" element={<JoinCalendar />} />
          <Route exact path="/calendar/settings" element={<EditCalendars />} />
        </CustomRoutes>,
      ]}
      <CustomRoutes noLayout>
        <Route exact path="/signup" element={<SignUp />} />
      </CustomRoutes>
      <Resource name="posts" list={PostList} />
    </Admin>
  </BrowserRouter>
);

export default App;

[ucharles]

제가 확인이 부족했습니다. 저는 에러는 발생하지 않습니다만, <BrowserRouter> 사용 시 라우팅이 정상적으로 동작하지 않았습니다. 일단 history를 사용하는 게 좋을 것 같습니다.

[ucharles]

<Admin> 의 prop history는 사용되지 않을 예정이기 때문에 향후 리팩토링 필요. 현 시점에선 Close 하겠습니다.