#Fitness Exercise App route working

4 messages · Page 1 of 1 (latest)

spiral rapids
# 
index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';


const root = ReactDOM.createRoot(document.getElementById('root'));


root.render (
    <BrowserRouter>
        <App />
    </BrowserRouter>
    
);```
# 
App.js file

import React from 'react';
import { Route, Routes } from 'react-router-dom'; // use to route between homepage and exercise details page
import { Box } from '@mui/material'; //box is essentially a div with some shading+colors

import ExerciseDetail from './pages/ExerciseDetail';
import Home from './pages/Home';
import Navbar from './components/Navbar';
import Footer from './components/Footer';

import './App.css';

const App = () => {
  return (
    <Box width="400px" sx={{ width: { xl: '1488px' }}} m="auto">
        <Navbar />
        <Routes>
            <Routes path="/" element={<Home />} />
            <Routes path="/exercise/:id" element={<ExerciseDetail />} /> 
        </Routes>
        <Footer />
        </Box>
  )
}

export default App```
pulsar pollen