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).