set up routing

This commit is contained in:
MapleLeaf
2021-12-31 12:58:03 -06:00
committed by Darius
parent 235775f84a
commit ba6f9b1698
8 changed files with 62 additions and 10 deletions

View File

@@ -11,7 +11,9 @@
"express": "^4.17.2",
"reacord": "workspace:*",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1"
},
"devDependencies": {
"@types/compression": "^1.7.2",

View File

@@ -0,0 +1,7 @@
export function DocumentPage() {
return (
<>
<h1>Docs</h1>
</>
)
}

View File

@@ -1,4 +1,13 @@
import { hydrate } from "react-dom"
import { BrowserRouter } from "react-router-dom"
import { Root } from "./root"
import { AppRoutes } from "./routes"
hydrate(<Root />, document)
hydrate(
<Root>
<BrowserRouter>
<AppRoutes />
</BrowserRouter>
</Root>,
document,
)

View File

@@ -1,5 +1,13 @@
import { StaticRouter } from "react-router-dom/server"
import { Root } from "./root"
import { AppRoutes } from "./routes"
export async function render(url: string) {
return <Root />
return (
<Root>
<StaticRouter location={url}>
<AppRoutes />
</StaticRouter>
</Root>
)
}

View File

@@ -0,0 +1,7 @@
export function LandingPage() {
return (
<>
<h1>Landing</h1>
</>
)
}

View File

@@ -1,6 +1,4 @@
import { Counter } from "./counter"
export function Root() {
export function Root({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
@@ -16,10 +14,7 @@ export function Root() {
}
/>
</head>
<body>
<h1>hi</h1>
<Counter />
</body>
<body>{children}</body>
</html>
)
}

View File

@@ -0,0 +1,20 @@
import { Route, Routes } from "react-router"
import { Link } from "react-router-dom"
import { DocumentPage } from "./document-page"
import { LandingPage } from "./landing-page"
export function AppRoutes() {
return (
<>
<nav>
<Link to="/">Home</Link>
<Link to="docs/getting-started">Getting Started</Link>
<Link to="docs/api">API Reference</Link>
</nav>
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="docs/*" element={<DocumentPage />} />
</Routes>
</>
)
}

4
pnpm-lock.yaml generated
View File

@@ -124,6 +124,8 @@ importers:
reacord: workspace:*
react: ^17.0.2
react-dom: ^17.0.2
react-router: ^6.2.1
react-router-dom: ^6.2.1
typescript: ^4.5.4
vite: ^2.7.10
dependencies:
@@ -131,6 +133,8 @@ importers:
reacord: link:../reacord
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
react-router: 6.2.1_react@17.0.2
react-router-dom: 6.2.1_react-dom@17.0.2+react@17.0.2
devDependencies:
'@types/compression': 1.7.2
'@types/express': 4.17.13