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 />,
},
],
},
];
