With react-router, you can collocate routes with the content that they render. In this section, you'll see that this is done using JSX syntax that defines routes.
You'll create a basic hello world example route so that you can see what routes look like in React applications. Then, you'll learn how you can organize your route declarations by feature instead of in a monolithic module. Finally, you'll implement a common parent-child routing pattern.
Hello route
Let's create a simple route that renders a simple component. First, we have a small React component that we want to render when the route is activated:
import React from "react";
export default function MyComponent() {
return <p>Hello Route!</p>;
}
Next, let's look at the route definition:
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import MyComponent from...