未命名 VZRS1t，HTML代码在线实时编辑、实时预览

index.html

style.css

tsx

main.tsx

tsx

app.tsx

package.json

tsx

routes.tsx

tsx

Home.tsx

tsx

About.tsx

            
                1
2
3
4
5
6
7
8
9
10
11
12

            
            <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React App</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

            
            body {
  padding: 0;
  margin: 0;
  background-color: #fefefe;
  text-align: center;
}
.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

h1 {
  font-family: Inter, sans-serif;
}

i {
  color: #777;
}

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            import {
  createBrowserRouter,
  RouterProvider,
} from "react-router";

import React from "react";
import ReactDOM from "react-dom/client";

const router = createBrowserRouter([
  {
    index: true,
    // path: "/",
    element: <div>Hello World</div>,
  },
]);

const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
  <RouterProvider router={router} />
);

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

            
            import routes from './routes.tsx';
import { Link } from 'react-router-dom';
import {
  RouterProvider,
} from "react-router";
function App() {
  return (
      <>
        <h1>React router</h1>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <RouterProvider router={routes} />
      </>
  );
}

export default App;

            
                1
2
3
4
5
6
7
8

            
            {
  "dependencies": {
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-router": "7.6.2",
    "react-router-dom": "7.6.2"
  }
}

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

            
            import { createBrowserRouter } from "react-router";
import Home from './Home.tsx';
import About from './About.tsx';

const routes = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    index: true,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

export default routes;

            
                1
2
3
4
5
6
7
8
9

            
            import { Link } from 'react-router-dom';
const Home: React.FC = () => (
  <div>
    <h1>Home Page</h1>
    <Link to="/about">Go to About</Link>
  </div>
);

export default Home;

            
                1
2
3
4
5
6
7
8
9

            
            import { Link } from 'react-router-dom';
const About: React.FC = () => (
  <div>
    <h1>About Page</h1>
    <Link to="/">Back Home</Link>
  </div>
);

export default About;

预览

控制台