1.sidebar
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
// Each logical "route" has two components, one for
// the sidebar and one for the main area. We want to
// render both of them in different places when the
// path matches the current URL.
// We are going to use this route config in 2
// spots: once for the sidebar and once in the main
// content section. All routes are in the same
// order they would appear in a .
const routes = [
{
path: "/",
exact: true,
sidebar: () => home!,
main: () => Home
,
},
{
path: "/bubblegum",
sidebar: () => bubblegum!,
main: () => Bubblegum
,
},
{
path: "/shoelaces",
sidebar: () => shoelaces!,
main: () => Shoelaces
,
},
];
export default function SidebarExample() {
return (
-
Home
-
Bubblegum
-
Shoelaces
{routes.map((route, index) => (
// You can render a in as many places
// as you want in your app. It will render along
// with any other s that also match the URL.
// So, a sidebar or breadcrumbs or anything else
// that requires you to render multiple things
// in multiple places at the same URL is nothing
// more than multiple s.
{routes.map((route, index) => (
// Render more s with the same paths as
// above, but different components this time.
);
}
2. Animated Transitions
import "./packages/react-router-dom/examples/Animation/styles.css";
import React from "react";
import {
TransitionGroup,
CSSTransition
} from "react-transition-group";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect,
useLocation,
useParams
} from "react-router-dom";
export default function AnimationExample() {
return (
);
}
function AnimationApp() {
let location = useLocation();
return (
Red
Green
Blue
Pink
{/*
This is no different than other usage of
, just make sure to pass
`location` to `Switch` so it can match
the old location as it animates out.
*/}
);
}
function NavLink(props) {
return (
);
}
function HSL() {
let { h, s, l } = useParams();
return (
hsl({h}, {s}%, {l}%)
);
}
function RGB() {
let { r, g, b } = useParams();
return (
rgb({r}, {g}, {b})
);
}
const styles = {};
styles.fill = {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0
};
styles.content = {
...styles.fill,
top: "40px",
textAlign: "center"
};
styles.nav = {
padding: 0,
margin: 0,
position: "absolute",
top: 0,
height: "40px",
width: "100%",
display: "flex"
};
styles.navItem = {
textAlign: "center",
flex: 1,
listStyleType: "none",
padding: "10px"
};
styles.hsl = {
...styles.fill,
color: "white",
paddingTop: "20px",
fontSize: "30px"
};
styles.rgb = {
...styles.fill,
color: "white",
paddingTop: "20px",
fontSize: "30px"
};
3.Route Config
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
// Some folks find value in a centralized route config.
// A route config is just data. React is great at mapping
// data into components, and is a component.
// Our route config is just an array of logical "routes"
// with `path` and `component` props, ordered the same
// way you'd do inside a ``.
const routes = [
{
path: "/sandwiches",
component: Sandwiches
},
{
path: "/tacos",
component: Tacos,
routes: [
{
path: "/tacos/bus",
component: Bus
},
{
path: "/tacos/cart",
component: Cart
}
]
}
];
export default function RouteConfigExample() {
return (
-
Tacos
-
Sandwiches
{routes.map((route, i) => (
);
}
// A special wrapper for that knows how to
// handle "sub"-routes by passing them in a `routes`
// prop to the component it renders.
function RouteWithSubRoutes(route) {
return (
(
// pass the sub-routes down to keep nesting
Sandwiches
;
}
function Tacos({ routes }) {
return (
Tacos
-
Bus
-
Cart
{routes.map((route, i) => (
);
}
function Bus() {
return Bus
;
}
function Cart() {
return Cart
;
}
4. Modal Gallery
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useHistory,
useLocation,
useParams,
} from "react-router-dom";
// This example shows how to render two different screens
// (or the same screen in a different context) at the same URL,
// depending on how you got there.
//
// Click the "featured images" and see them full screen. Then
// "visit the gallery" and click on the colors. Note the URL and
// the component are the same as before but now we see them
// inside a modal on top of the gallery screen.
export default function ModalGalleryExample() {
return (
);
}
function ModalSwitch() {
let location = useLocation();
// This piece of state is set when one of the
// gallery links is clicked. The `background` state
// is the location that we were at when one of
// the gallery links was clicked. If it's there,
// use it as the location for the so
// we show the gallery in the background, behind
// the modal.
let background = location.state && location.state.background;
return (
{/* Show the modal when a background page is set */}
{background && Featured Images
-
Tomato
-
Crimson
);
}
function Gallery() {
let location = useLocation();
return (
{IMAGES.map((i) => (
{i.title}
))}
);
}
function ImageView() {
let { id } = useParams();
let image = IMAGES[parseInt(id, 10)];
if (!image) return Image not found;
return (
{image.title}
{image.title}