You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/routes/solid-router/concepts/layouts.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -37,7 +37,7 @@ render(
37
37
);
38
38
```
39
39
40
-
With the root-level layout, `props.children` will be replaced with the content of current route.
40
+
With the root-level layout, `props.children` will be replaced with the content of the current route.
41
41
This means that while the words "Header" and "Footer" will be displayed on every page, the content between them will change depending on the current route.
42
42
For example, when the route is `/hello-world`, you will see the text "Hello world!" between the header and footer.
Copy file name to clipboardExpand all lines: src/routes/solid-start/building-your-application/css-and-styling.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -78,7 +78,7 @@ This is because, behind the scenes, classes defined in CSS modules are renamed t
78
78
When classes are hard coded using the class attribute (`class="card"`), Solid is not aware that it should rename `card` to something different.
79
79
80
80
To fix this, you can import classes used in your CSS module.
81
-
The import object can be thought of as `humanClass: generatedClass` and within the component, they key (ie. the class on the element) is used to get the unique, generated class name.
81
+
The import object can be thought of as `humanClass: generatedClass` and within the component, the key (ie. the class on the element) is used to get the unique, generated class name.
Copy file name to clipboardExpand all lines: src/routes/solid-start/building-your-application/head-and-metadata.mdx
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,7 +38,7 @@ export default function About() {
38
38
These tags will be applied for that specific route only and will be removed from `document.head` once a user navigates away from the page.
39
39
`routeData` can also be used here to create titles and SEO metadata that is specific to the dynamic parts of the route.
40
40
41
-
## Adding a site-suffix in Title
41
+
## Adding a sitesuffix in Title
42
42
43
43
Custom components can be created to wrap the `Title` component to add a site-specific prefix to all the titles:
44
44
@@ -112,7 +112,7 @@ export default function Root() {
112
112
}
113
113
```
114
114
115
-
If you need to add routespecific information inside your route, much like the `Title` component, you can use the `Meta` component within the desired route.
115
+
If you need to add route-specific information inside your route, much like the `Title` component, you can use the `Meta` component within the desired route.
116
116
This overrides the `Meta` tags used within the `Head` component.
Copy file name to clipboardExpand all lines: src/routes/solid-start/building-your-application/routing.mdx
+8-6Lines changed: 8 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: "Routing"
3
3
---
4
4
5
-
Routing serves as a key component to web applications.
5
+
Routing serves as a key component of web applications.
6
6
Within SolidStart, there are two types:
7
7
8
8
-**UI routes**— define the user interface in your app
@@ -16,11 +16,11 @@ SolidStart uses file based routing which is a way of defining your routes by cre
16
16
This includes your pages and API routes.
17
17
18
18
SolidStart traverses your `routes` directory, collects all of the routes, and then makes them accessible using the [`<FileRoutes />`](/solid-start/reference/routing/file-routes).
19
-
This component will only include your UI routes, and not your API routes.
19
+
This component will only include your UI routes, not your API routes.
20
20
Rather than manually defining each `Route` inside a `Router` component, `<FileRoutes />` will generate the routes for you based on the file system.
21
21
22
22
Because `<FileRoutes />` returns a routing config object, you can use it with the router of your choice.
23
-
In this example we use [`solid-router`](/solid-router):
23
+
In this example, we use [`solid-router`](/solid-router):
24
24
25
25
```tsx {7-9} title="app.tsx"
26
26
import { Suspense } from"solid-js";
@@ -37,7 +37,8 @@ export default function App() {
37
37
```
38
38
39
39
The `<Router />` component expects a `root` prop which functions as the root layout of your entire app.
40
-
You will want to make sure `props.children` is wrapped in `<Suspense />` because each component will be lazy loaded automatically for you. Without this you may see some unexpected hydration errors.
40
+
You will want to make sure `props.children` is wrapped in `<Suspense />` since each component will be lazy-loaded automatically.
41
+
Without this, you could see some unexpected hydration errors.
41
42
42
43
`<FileRoutes />` will generate a route for each file in the `routes` directory and its subdirectories. For a route to be rendered as a page, it must default export a component.
43
44
This component represents the content that will be rendered when users visit the page:
@@ -84,7 +85,8 @@ If you want to create nested layouts you can create a file with the same name as
84
85
|-- article-2.tsx// example.com/blog/article-2
85
86
```
86
87
87
-
In this case the `blog.tsx` file will act as a layout for the articles in the `blog` folder. You can reference the child content
88
+
In this case, the `blog.tsx` file will act as a layout for the articles in the `blog` folder.
89
+
You can reference the child's content
88
90
by using `props.children` in the layout.
89
91
90
92
<TabsCodeBlocks>
@@ -113,7 +115,7 @@ export default function BlogLayout(props) {
113
115
By default, the component that is rendered for a route comes from the default export of the `index.tsx` file in each folder.
114
116
However, this can make it difficult to find the correct `index.tsx` file when searching, since there will be multiple files with that name.
115
117
116
-
To avoid this, you can rename the `index.tsx` file to the name of the folder it is in, enclosed in parenthesis.
118
+
To avoid this, you can rename the `index.tsx` file to the name of the folder it is in, enclosed in parentheses.
117
119
118
120
This way, it will be treated as the default export for that route:
0 commit comments