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", "express": "^4.17.2",
"reacord": "workspace:*", "reacord": "workspace:*",
"react": "^17.0.2", "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": { "devDependencies": {
"@types/compression": "^1.7.2", "@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 { hydrate } from "react-dom"
import { BrowserRouter } from "react-router-dom"
import { Root } from "./root" 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 { Root } from "./root"
import { AppRoutes } from "./routes"
export async function render(url: string) { 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({ children }: { children: React.ReactNode }) {
export function Root() {
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
@@ -16,10 +14,7 @@ export function Root() {
} }
/> />
</head> </head>
<body> <body>{children}</body>
<h1>hi</h1>
<Counter />
</body>
</html> </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:* reacord: workspace:*
react: ^17.0.2 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
typescript: ^4.5.4 typescript: ^4.5.4
vite: ^2.7.10 vite: ^2.7.10
dependencies: dependencies:
@@ -131,6 +133,8 @@ importers:
reacord: link:../reacord reacord: link:../reacord
react: 17.0.2 react: 17.0.2
react-dom: 17.0.2_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: devDependencies:
'@types/compression': 1.7.2 '@types/compression': 1.7.2
'@types/express': 4.17.13 '@types/express': 4.17.13