1.结构
2.router的index.js代码
import Home from "../pages/home/index";
const routes = [
{
path: "/",
element: <Home />,
},
{
path: "home",
element: <Home />,
},
];
export default routes;
3.app.js代码
import "./App.css";
import routes from "./router";
import { useRoutes } from "react-router-dom";
// 主要是用来进行路由守卫
function BeforRouterEach() {
const router = useRoutes(routes);
return router;
}
function App() {
return <div id="app">{<BeforRouterEach />}</div>;
}
export default App;
index.js代码
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// BrowserRouter 是history模式
<BrowserRouter>
{/* // Provider主要配合redux,进行store数据的传递 */}
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
);
reportWebVitals();