Category: JavaScript

To add navigation with React, we install React Router.

To install it, we run

npm install react-router-dom

Then we use it by writing

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

to add the Switch component with the Route components inside.

The Route components have the route components nested inside them.

The path is set to the path that users navigate to to render the component inside.

To change the position of a React Material UI dialog, we call makeStyles to return classes with the styles we want.

For instance, we write

import React from "react";
import { makeStyles, Dialog } from "@material-ui/core";

const useStyles = makeStyles({
  dialog: {
    position: "absolute",
    left: 10,
    top: 50,
  },
});

function Example() {
  const classes = useStyles();

  return (
    <Dialog
      classes={{
        paper: classes.dialog,
      }}
      //...
    >
      //...
    </Dialog>
  );
}

to call makeStyles with an object to create the dialog class with the dialog styles inside.

Then we call useStyles returned from makeStyles to return the classes object.

And we set the paper class to the classes.dialog class.

To fix the ‘useNavigate() may be used only in the context of a component’ error in React, we put the component that uses useNavigate inside BrowserRouter.

For instance, w write

import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

to put App in BrowserRouter.

Then we write

function App() {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate(-1)}>go back</button>
      <Nav />
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="/home" element={<Home />} />
        <Route exact path="/upcoming/:user" element={<Upcoming />} />
        <Route exact path="/record/:user" element={<Record />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

to call useNavigate in App and call navigate in the onClick handler.

To declare global variables in React, we can use the React context API.

For instance, we write

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee",
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222",
  },
};
const ThemeContext = React.createContext(themes.light);

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

to call React.createContext to create the ThemeContext.

Then we wrap ThemeContext.Provider to let the Toolbar component access the context values.

Then we use the useContext hook to access the theme.light value by writing

function Toolbar() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}```

We call `useContext` with `ThemeContext` to get the value of `ThemeContext` as the value of `theme`.

To render array elements in reverse order efficiently with React, we use the JavaScript array reverse method to reverse our array.

For instance, we write

[...this.props.myList].reverse().map(createListItem);

to call reverse on myList after making a copy of it with the spread operator.

Then we call map with the createListItem function which renders the item we want.