Introduction to React and React Router
What is React?
React is a JavaScript framework designed for building user interfaces, and is the primary DOM (Document Object Model) rendering library used inside the C#Bot client-side.
Because React is only concerned with rendering data to the DOM, creating a react application requires the use of additional libraries, including for state management (see MobX) and routing (see React Router). React allows for faster rendering and the creation of large web applications that can change data without reloading the page. It is scalable and simple.
What is React Router?
React Router is a selection of navigation components, and is mainly used for handling page routing in the C#Bot client-side. It allows us to build a single-page web application with navigation, that doesn’t refresh each time the user navigates.
In the following example, there are two pages that are handled by the router: ‘Home’ and ‘About’. When one of the <Link>s is clicked on, the router renders the corresponding <Route>, which is found inside the <Switch> tags.
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
The following code was taken from the LMS example project: lmssharp/clientside/src/Views/Admin.tsx. It shows another example of the <Switch> and <Route> tags that are used for page routing.
<div className="body-content">
<Switch>
{/* Admin entity pages */}
<Route exact={true} path={`${path}`} component={AdminPage} />
<Route path={`${path}/User`} component={AllUsersPage} />
<Route path={`${path}/forms`} component={FormsPage} />
<Route path={`${path}/workflows`} component={WorkflowsPage} />
<Route path={`${path}/Timelines`} component={TimelinePage} />
<Route path={`${path}/CourseCategoryEntity`} component={AdminPages.CourseCategoryEntityPage} />
<Route path={`${path}/CourseLessonsEntity`} component={AdminPages.CourseLessonsEntityPage} />
<Route path={`${path}/CourseEntity`} component={AdminPages.CourseEntityPage} />
<Route path={`${path}/UserEntity`} component={AdminPages.UserEntityPage} />
<Route path={`${path}/LessonSubmissionEntity`} component={AdminPages.LessonSubmissionEntityPage} />
<Route path={`${path}/LessonEntity`} component={AdminPages.LessonEntityPage} />
// Some lines have been excluded for simplicity.
</Switch>
</div>
Learn about React:
- Recommended tutorial: Building Tic-Tac-Toe in React
- Recommended tutorial: w3schools React Tutorial
- React Documentation and Resources
Learn about React Router:
- Recommended tutorial: React Router Quick Start Guide
- React Router Documentation
Was this article helpful?