Solid Router¶

import { render } from 'solid-js/web';
import App from './App';
import { Router } from '@solidjs/router'; // 👈 Import the router

render(
    () => (
        <Router>
            {' '}
            {/* 👈 Wrap the router around the app */}
            <App />
        </Router>
    ),
    document.getElementById('app')
);

import { render } from 'solid-js/web';
import App from './App';
import { Router, Route, Routes } from '@solidjs/router';

render(
    () => (
        <Router>
            <Routes>
                <Route path="/" component={App} />{' '}
                {/* 👈 Define the home page route */}
            </Routes>
        </Router>
    ),
    document.getElementById('app')
);

import { render } from 'solid-js/web';
import App from './App';
import About from './About';
import Contact from './Contact';
import { Router, Route, Routes } from '@solidjs/router';

render(
    () => (
        <Router>
            <Routes>
                <Route path="/" component={App} />
                <Route
                    path="/about"
                    component={About}
                /> {/* 👈 Define the about page route */}
                <Route
                    path="/contact"
                    component={Contact}
                />{' '}
                {/* 👈 Define the contact page route */}
            </Routes>
        </Router>
    ),
    document.getElementById('app')
);

import { render } from 'solid-js/web';
import App from './App';
import { Router, Route, Routes } from '@solidjs/router';
import { lazy } from 'solid-js';

const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

render(
    () => (
        <Router>
            <Routes>
                <Route path="/" component={App} />
                <Route
                    path="/about"
                    component={About}
                /> {/* 👈 Define the about page route */}
                <Route
                    path="/contact"
                    component={Contact}
                />{' '}
                {/* 👈 Define the contact page route */}
            </Routes>
        </Router>
    ),
    document.getElementById('app')
);

import styles from './App.module.css';
import { A } from '@solidjs/router'; // 👈 Import the A component

const App = () => {
    return (
        <div class={styles.App}>
            <header class={styles.header}>
                <p>
                    Edit <code>src/App.tsx</code> and save
                    to reload.
                </p>
                <a
                    class={styles.link}
                    href="https://github.com/solidjs/solid"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn Solid
                </a>
                <A href="/about">About</A>{' '}
                {/* 👈 Add a link to the about page */}
                <A href="/contact">Contact</A> {/* 👈 Add a link to the contact page */}
            </header>
        </div>
    );
};

export default App;

import { render } from 'solid-js/web';
import App from './App';
import About from './About';
import Contact from './Contact';
import { Router, Route, Routes, A } from '@solidjs/router';

render(
    () => (
        <Router>
            <Routes>
                <Route path="/" component={App} />
                <Route path="/about" component={About} />
                <Route
                    path="/contact"
                    component={Contact}
                />
            </Routes>
        </Router>
    ),
    document.getElementById('app')
);

import styles from './App.css';
import { A } from '@solidjs/router';

const App = () => {
    return (
        <div class={styles.App}>
            <header class={styles.header}>
                <p>
                    Edit <code>src/App.tsx</code> and save
                    to reload.
                </p>
                <A
                    class={styles.link}
                    href="/about"
                    activeClass="underlined" // 👈 Add the active class
                >
                    About
                </A>
                <A
                    class={styles.link}
                    href="/contact"
                    activeClass="underlined" // 👈 Add the active class
                >
                    Contact
                </A>
            </header>
        </div>
    );
};

export default App;

function getPath({ navigate, location }) {
    //navigate is the result of calling useNavigate(); location is the result of calling useLocation().
    //You can use those to dynamically determine a path to navigate to
    return '/some-path';
}

//Navigating to /redirect will redirect you to the result of getPath
<Route
    path="/redirect"
    element={<Navigate href={getPath} />}
/>;

import { render } from 'solid-js/web';
import App from './App';
import About from './About';
import User from './User';
import Contact from './Contact';
import { Router, Route, Routes, A } from '@solidjs/router';

render(
    () => (
        <Router>
            <Routes>
                <Route path="/" component={App} />
                <Route path="/about" component={About} />
                <Route
                    path="/user/:id"
                    component={User}
                />{' '}
                {/* 👈 Add a dynamic route */}
                <Route
                    path="/contact"
                    component={Contact}
                />
            </Routes>
        </Router>
    ),
    document.getElementById('app')
);

import styles from './User.module.css';
import { useParams } from '@solidjs/router';

const User = () => {
    const params = useParams(); // 👈 Get the dynamic route parameters

    return (
        <div class={styles.User}>
            <header class={styles.header}>
                <p>
                    Edit <code>src/User.tsx</code> and save
                    to reload.
                </p>
                <A class={styles.link} href="/">
                    Home
                </A>
                <A class={styles.link} href="/about">
                    About
                </A>
                <A class={styles.link} href="/contact">
                    Contact
                </A>
                <p>
                    This is the user with the id of{' '}
                    <code>{params.id}</code>{' '}
                    {/* 👈 Access the dynamic route parameter */}
                </p>
            </header>
        </div>
    );
};

export default User;

import { createResource, createSignal } from 'solid-js';
import { useParams } from '@solidjs/router';

// 👇 This is an asynchronous function that fetches a user from the jsonplaceholder API
async function fetchUser(id) {
    const response = await fetch(
        `https://jsonplaceholder.typicode.com/users/${id}`
    );
    return response.json();
}

const User = () => {
    const params = useParams();
    const [data] = createResource(params.id, fetchUser); // 👈 Pass the dynamic route parameter to the createResource primitive

    return (
        <div>
            {data.loading ? ( // 👈 Use the loading property to show a loading indicator
                <p>Loading...</p>
            ) : (
                <div>
                    <p>Name: {data().name}</p>{' '}
                    {/* 👈 Access the data returned from the fetchUser function */}
                    <p>Email: {data().email}</p>
                    <p>Phone: {data().phone}</p>
                </div>
            )}
        </div>
    );
};

export default User;

import { render } from 'solid-js/web';
import App from './App';
import About from './About';
import User from './User';
import Contact from './Contact';
import { Router, Route, Routes, A } from '@solidjs/router';

render(
    () => (
        <Router>
            <Routes>
                <Route path="/" component={App} />
                <Route path="/about" component={About} />
                <Route
                    path="/user/*"
                    component={User}
                />{' '}
                {/* 👈 Make the id parameter a wildcard */}
                <Route
                    path="/contact"
                    component={Contact}
                />
            </Routes>
        </Router>
    ),
    document.getElementById('app')
);

import { render } from 'solid-js/web';
import App from './App';
import About from './About';
import User from './User';
import Contact from './Contact';
import { Router, Route, Routes, A } from '@solidjs/router';

render(
    () => (
        <Router>
            <Routes>
                <Route path="/" component={App} />
                <Route path="/about" component={About} />
                <Route
                    path="/user/*id"
                    component={User}
                />{' '}
                {/* 👈 Name the wildcard parameter */}
                <Route
                    path="/contact"
                    component={Contact}
                />
            </Routes>
        </Router>
    ),
    document.getElementById('app')
);

//Navigating from login to register does not cause the Login component to re-render
<Route path={['login', 'register']} component={Login} />

<Route path="/users/:id" component={User} />  {/*// Normal route definition */}

<Routes path="/users">
  <Route path="/:id" component={User} /> {/*// Nested route definition */}
</Route>

//This won't work the way you'd expect
<Route path="/users" component={Users}>
  <Route path="/:id" component={User} />
</Route>

//This works
<Route path="/users" component={Users} />
<Route path="/users/:id" component={User} />

//This also works
<Route path="/users">
  <Route path="/" component={Users} />
  <Route path="/:id" component={User} />
</Route>

import { Outlet } from '@solidjs/router';

function PageWrapper() {
    return (
        <div>
            <h1> We love our users! </h1>
            <Outlet />
            <A href="/">Back Home</A>
        </div>
    );
}

<Route path="/users" component={PageWrapper}>
    <Route path="/" component={Users} />
    <Route path="/:id" component={User} />
</Route>;

<Route
    path="/"
    element={
        <div>
            Onion starts here <Outlet />
        </div>
    }
>
    <Route
        path="layer1"
        element={
            <div>
                Another layer <Outlet />
            </div>
        }
    >
        <Route
            path="layer2"
            element={<div>Innermost layer</div>}
        ></Route>
    </Route>
</Route>

import { Router, hashIntegration } from '@solidjs/router';

<Router source={hashIntegration()}>
    <App />
</Router>;

import { lazy } from 'solid-js';
import { render } from 'solid-js/web';
import { Router, useRoutes, A } from '@solidjs/router';

// Define your routes
const routes = [
    {
        path: '/users',
        component: lazy(() => import('/pages/users.js')),
    },
    {
        path: '/users/:id',
        component: lazy(() =>
            import('/pages/users/[id].js')
        ),
        children: [
            {
                path: '/',
                component: lazy(() =>
                    import('/pages/users/[id]/index.js')
                ),
            },
            {
                path: '/settings',
                component: lazy(() =>
                    import('/pages/users/[id]/settings.js')
                ),
            },
            {
                path: '/*all',
                component: lazy(() =>
                    import('/pages/users/[id]/[...all].js')
                ),
            },
        ],
    },
    {
        path: '/',
        component: lazy(() => import('/pages/index.js')),
    },
    {
        path: '/*all',
        component: lazy(() => import('/pages/[...all].js')),
    },
];

function App() {
    const Routes = useRoutes(routes); // 👈 useRoutes takes in the routes config
    return (
        <>
            <h1>Awesome Site</h1>
            <A class="nav" href="/">
                Home
            </A>
            <A class="nav" href="/users">
                Users
            </A>
            <Routes />
        </>
    );
}

render(
    () => (
        <Router>
            <App />
        </Router>
    ),
    document.getElementById('app')
);

import { useParams } from '@solidjs/router';

const params = useParams();

// fetch user based on the id path parameter
const [user] = createResource(() => params.id, fetchUser);

const navigate = useNavigate();

if (unauthorized) {
    navigate('/login', { replace: true });
}

import { useLocation } from '@solidjs/router';

const location = useLocation();

const pathname = createMemo(() => location.pathname);

const [searchParams, setSearchParams] = useSearchParams();

return (
    <div>
        <span>Page: {searchParams.page}</span>
        <button
            onClick={() =>
                setSearchParams({
                    page: searchParams.page + 1,
                })
            }
        >
            Next Page
        </button>
    </div>
);

const isRouting = useIsRouting();

return (
    <div classList={{ 'grey-out': isRouting() }}>
        <MyAwesomeContent />
    </div>
);

const match = useMatch(() => props.href);

return <div classList={{ active: Boolean(match()) }} />;

useBeforeLeave((e: BeforeLeaveEventArgs) => {
    if (form.isDirty && !e.defaultPrevented) {
        // preventDefault to block immediately and prompt user async
        e.preventDefault();
        setTimeout(() => {
            if (
                window.confirm(
                    'Discard unsaved changes - are you sure?'
                )
            ) {
                // user wants to proceed anyway so retry with force=true
                e.retry(true);
            }
        }, 100);
    }
});