react-router-dom 实现路由

react-router-dom 示例：

依赖版本

    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Entry />);




function Entry() {
  return (
    <App>
  {/*方案一*/}
      <Routes4 />

  {/*方案二*/}
     {/*<Routes>*/}
      {/*  <Route path="/" element={<SuspenseLayout />}>*/}
      {/*    <Route path="/foo" element={<Foo />} />*/}
      {/*    <Route path="/bar" element={<Bar />} />*/}
      {/*  </Route>*/}
      {/*</Routes>*/}
    </App>
  );
}



function App(props: any) {
  let historyRef = React.useRef<BrowserHistory>();
  if (historyRef.current == null) {
    historyRef.current = createBrowserHistory({ window });
  }

  let history = historyRef.current;
  let [state, setState] = React.useState({
    action: history.action,
    location: history.location,
  });
  React.useLayoutEffect(() => history.listen(setState), [history]);
  return (
    <div id={'3232'}>
      {/*<Browser navigator={history} location={state.location} />*/}
      <Router navigator={history} location={state.location}>
        {props.children}
      </Router>
    </div>
  );
}


export function Routes4() {
  return useRoutes(routes);
}


const routes = [
  {
    path: '/',
    element: <SuspenseLayout />,
    children: [
      {
        path: '/foo',
        element: <Foo />,
      },
      {
        path: '/bar',
        element: <Bar />,
      },
      {
        path: '/todolist',
        element: <TodoList />,
      },
    ],
  },
];