How to use wouter - 10 common examples
To help you get started, we’ve selected a few wouter examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
bmcmahen / julienne / src / Main.tsx View on Github 
export const Main: React.FunctionComponent = props => {
const theme = useTheme();
const user = useSession();
const [query, setQuery] = React.useState("");
const [activeTab, setActiveTab] = React.useState(0);
const { value: followRequests } = useFollowRequests();
const isLarge = useMedia({ minWidth: "768px" });
const [, params] = useRoute("/:recipe*");
const showingRecipe = params.recipe;
// i'm disabling this for now, since it was running really poorly. unsure
// whats up here.
// const transitions = useTransition(false, recipeId => null, {
// from: { opacity: 0, transform: "scale(0.95)" },
// enter: { opacity: 1, transform: "scale(1)" },
// leave: { opacity: 0, transform: "scale(1.1)" },
// immediate: !isLarge
// });
const renderList = isLarge || !showingRecipe;
return (*/
const [location, setLocation] = useLocation();
location; // $ExpectType string
// embedded useLocation hook doesn't accept any arguments
const [] = useLocation({}); // $ExpectError
setLocation(); // $ExpectError
setLocation("/app");
setLocation("/app", true);
useRoute(Symbol()); // $ExpectError
useRoute(); // $ExpectError
useRoute("/");
const [match, params] = useRoute<{ id: string }>("/app/users/:id");
match; // $ExpectType boolean
if (params) {
params.id; // $ExpectType string
params.age; // $ExpectError
} else {
params; // $ExpectType null
}
const [, parameters] = useRoute<{ id: string }>("/app/users/:id");
if (parameters) {
parameters.id; // $ExpectType string
parameters.age; // $ExpectError
} else {
parameters; // $ExpectType null/*
* Hooks API
*/
const [location, setLocation] = useLocation();
location; // $ExpectType string
// embedded useLocation hook doesn't accept any arguments
const [] = useLocation({}); // $ExpectError
setLocation(); // $ExpectError
setLocation("/app");
setLocation("/app", true);
useRoute(Symbol()); // $ExpectError
useRoute(); // $ExpectError
useRoute("/");
const [match, params] = useRoute<{ id: string }>("/app/users/:id");
match; // $ExpectType boolean
if (params) {
params.id; // $ExpectType string
params.age; // $ExpectError
} else {
params; // $ExpectType null
}
const [, parameters] = useRoute<{ id: string }>("/app/users/:id");
if (parameters) {
parameters.id; // $ExpectType string
parameters.age; // $ExpectErrorHello World!;
/*
* Hooks API
*/
const [location, setLocation] = useLocation();
location; // $ExpectType string
// embedded useLocation hook doesn't accept any arguments
const [] = useLocation({}); // $ExpectError
setLocation(); // $ExpectError
setLocation("/app");
setLocation("/app", true);
useRoute(Symbol()); // $ExpectError
useRoute(); // $ExpectError
useRoute("/");
const [match, params] = useRoute<{ id: string }>("/app/users/:id");
match; // $ExpectType boolean
if (params) {
params.id; // $ExpectType string
params.age; // $ExpectError
} else {
params; // $ExpectType null
}
const [, parameters] = useRoute<{ id: string }>("/app/users/:id");
if (parameters) {Hello World!;
/*
* Hooks API
*/
const [location, setLocation] = useLocation();
location; // $ExpectType string
setLocation(); // $ExpectError
setLocation("/app");
setLocation("/app", true);
useLocation({ base: "/app" }); // $ExpectError
useRoute(Symbol()); // $ExpectError
useRoute(); // $ExpectError
useRoute("/");
const [match, params] = useRoute<{ id: string }>("/app/users/:id");
match; // $ExpectType boolean
if (params) {
params.id; // $ExpectType string
params.age; // $ExpectError
} else {
params; // $ExpectType null
}
const [, parameters] = useRoute<{ id: string }>("/app/users/:id");
if (parameters) {/*
* Hooks API
*/
const [location, setLocation] = useLocation();
location; // $ExpectType string
setLocation(); // $ExpectError
setLocation("/app");
setLocation("/app", true);
useLocation({ base: "/app" }); // $ExpectError
useRoute(Symbol()); // $ExpectError
useRoute(); // $ExpectError
useRoute("/");
const [match, params] = useRoute<{ id: string }>("/app/users/:id");
match; // $ExpectType boolean
if (params) {
params.id; // $ExpectType string
params.age; // $ExpectError
} else {
params; // $ExpectType null
}
const [, parameters] = useRoute<{ id: string }>("/app/users/:id");
if (parameters) {
parameters.id; // $ExpectType string
parameters.age; // $ExpectErroruseRoute(Symbol()); // $ExpectError
useRoute(); // $ExpectError
useRoute("/");
const [match, params] = useRoute<{ id: string }>("/app/users/:id");
match; // $ExpectType boolean
if (params) {
params.id; // $ExpectType string
params.age; // $ExpectError
} else {
params; // $ExpectType null
}
const [, parameters] = useRoute<{ id: string }>("/app/users/:id");
if (parameters) {
parameters.id; // $ExpectType string
parameters.age; // $ExpectError
} else {
parameters; // $ExpectType null
}const UseRouteTest = () => {
const [match, params] = useRoute("/users/:name");
if (!match) return null;
return <div>Welcome, {params && params.name}!</div>;
};const PrivateRoute = ({
component: Component,
path,
...other
}: PrivateRouteProps) => {
const user = firebase.auth().currentUser;
const [match, params] = useRoute(path);
if (!user && params.rest) {
return ;
}
if (!user) {
return null;
}
return ;
};function Name() {
const [match, params] = useRoute('/person/:name')
const name = match ? params.name : names[0]
return <span class="middle">{name}</span>
}wouter
Minimalist-friendly ~1.5KB router for React
