Developer Docs

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:

Learn about React Router:

On this page