react-router-dom and Navigation

React¹⁷.0.2, react-router-dom⁵.2.0, , Created at July 21, 2021, Read Series…

This section is a navigation demo of loading a component into html dom using <BrowserRouter> in react-router-dom.
Routing in React means: unload current React element and load new React element.

npm install --save react-router-dom

src/features/Todo/ListPage.tsx

Add list page for demo to use <NavLink exact={true}/> for navigation.

exact : When true, the active class/style will only be applied if the location is matched exactly. e.g. show/hide.

import { NavLink } from 'react-router-dom';
import { Home } from '@material-ui/icons';
import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
export default function TodoList(): JSX.Element {
  return (
    <NavLink exact={true} to={'/'} >
      <ListItem button={true}>
        <ListItemIcon>
          <Home />
        </ListItemIcon>
        <ListItemText primary={'home'} />
      </ListItem>
    </NavLink>
  );
)

NavLink, Route, Switch. And exact in src/App.tsx

[Try to understand] NavLink, Route, Switch. And exact.

// Basic-1.5. react-router-dom
import { NavLink, Route, Switch } from 'react-router-dom';
import TodoList from './features/Todo/ListPage';
...
export default function App() {
  return (
...
      {/* Basic-1.5. react-router-dom */}
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMore />} aria-controls="panel2a-content" id="panel2a-header-basic-1.2">
            <Typography>Basic-1.5. react-router-dom</Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Switch>
              <Route path="/todo" component={TodoList} exact />
            </b>
            <NavLink exact={true} to={'/todo'} >
              <ListItem button={true}>
                <ListItemIcon>
                  <Computer />
                </ListItemIcon>
                <ListItemText primary={'todo'} />
              </ListItem>
            </NavLink>
          </AccordionDetails>
        </Accordion>
...
  );
}

<BrowserRouter /> in src/index.tsx

[Try to understand] <BrowserRouter />.

import React from 'react';
import { Suspense } from 'react';
import ReactDOM from 'react-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import App from './App';
import theme from './theme';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './store/Store';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
  <Suspense fallback={<div>...</div>}>
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          {/* Wrap your original code here */}
          <CssBaseline />
          <App />
        </BrowserRouter>
      </ThemeProvider>
    </Provider>
  </Suspense>,
  document.querySelector('#root'),
);reportWebVitals();

Github commits is here: Basic-1.5. react-router-dom

Conclusion

react-router-dom is a 3rd party package which enables routing in our React apps.
[Further] will implement a PrivateRoute based on authentication and authorization(roles and/or permissions).