How do I implement routing and authentication in a Create React App?

How do I implement routing and authentication in a Create React App?

You can use React Router for routing and a library like Firebase or Auth0 for authentication. Would you like a code example?

Yes, please provide a code example for setting up React Router.

First, install React Router with npm install react-router-dom. Then, set up your routes in App.js like this:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/login' component={Login} />
        <Route path='/dashboard' component={Dashboard} />
      </Switch>
    </Router>
  );
}

How do I protect the dashboard route to ensure only authenticated users can access it?

You can create a PrivateRoute component that checks for authentication before rendering the dashboard. Here's an example:

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = // your authentication logic here;
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to='/login' />
        )
      }
    />
  );
};