S
SolidJS•2y ago
🟐🡽

Nested routing not working

One video is with npm, the other with pnpm Both not working, what am I doing wrong? cat.tsx 
import { A, Outlet } from "solid-start";

const CatLayout = () => {
    return (
        <>
            <A href="/cat">Cat</A>
            <A href="/cat/dog">Dog</A>
            <hr />
            <Outlet />
        </>
    );
};

export default CatLayout;
import { A, Outlet } from "solid-start";

const CatLayout = () => {
    return (
        <>
            <A href="/cat">Cat</A>
            <A href="/cat/dog">Dog</A>
            <hr />
            <Outlet />
        </>
    );
};

export default CatLayout;
/cat/index.tsx 
const Cat = () => {
    return <>Cat</>;
};

export default Cat;
const Cat = () => {
    return <>Cat</>;
};

export default Cat;
/cat/dog.tsx 
const Dog = () => {
    return <>Dog</>;
};

export default Dog;
const Dog = () => {
    return <>Dog</>;
};

export default Dog;
1 Reply
Martnart
Martnart•2y ago
This is a known issue with rendering only text node inside a fragment. Take a look at this. https://github.com/solidjs/solid-start/issues/776 I believe if you wrap your text inside real dom nodes (aka div) it would work.

Did you find this page helpful?