react-demo项目:使用路由react-router-dom(不使用create-react-app脚手架)

react-router-dom文档：https://github.com/remix-run/react-router/blob/main/docs/start/tutorial.md

官网文档查看：https://reactrouter.com/en/6.4.3/route/route

项目使用的react-router-dom版本为v6.4.3

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.3"
  },

安装依赖

npm i react-router-dom --save

设置布局

//src\App.jsx
import React from "react";
import { Outlet,useNavigate } from "react-router-dom";
import './App.css';

function App(props) {

  const navigate = useNavigate();

  const go = (link) => {
    navigate(link)
  }

  return (
    <div className="H-layout">

      <div className="H-header">
       <span> hello Work</span>
      </div>

      <div className="H-body">
        <div className="H-silder">
        <button className="btn" onClick={() => go('/home')}>Home </button>
        <button className="btn" onClick={() => go('/looking')}>Looking </button>
        <button className="btn" onClick={() => go('/about')}>ablout</button>
        </div>
        <div className="H-container">
          <Outlet />
        </div>
      </div>
    </div>
  )
}

export default App;

入口主文件

//src\main.js
import React from "react";
import ReactDOM from 'react-dom/client';
import { RouterProvider } from "react-router-dom";
import router from './router';

ReactDOM.createRoot(document.getElementById('app'))
.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

路由配置

//src\router.js
import { createHashRouter} from "react-router-dom";
import React from "react";
import App from "./App.jsx";
import Looking from './pages/Looking/index.jsx';
import About from './pages/About/index.jsx';

const router = createHashRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "home",
        element: <div>home</div>,
      },
      {
        path: "looking",
        element: <Looking />,
      },
      {
        path: "about",
        element: <About />,
      },
    ]
  },
]);

export default router;