Linking with React router
Sat May 27 2023 18:12:55 GMT+0000 (Coordinated Universal Time)
Saved by
@Kristi
// npm install react-router-dom
// main.jsx
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
//create your sites pages and then import them.
import { Navigation, Footer } from './components/ExportComponents';
import { ThemeProvider } from 'styled-components';
import { light, dark } from './components/styles/Theme.styled';
import { Routes, Route } from 'react-router-dom';
import {
Home,
About,
Location,
Career,
ErrorPage,
} from './pages/ExportPagesComponents.jsx';
function App() {
return (
<ThemeProvider theme={light}>
<Navigation />
<Routes>
<Route path="/" element={<Home />} errorElement={<ErrorPage />} />
<Route path="/about" element={<About />} />
<Route path="/location" element={<Location />} />
//Nesting Routes!
<Route path="/career" element={<Career />} >
//the /:id is any id
<Route path=":id" element={<CareerDescription />} />
</Route>
//If no url match was found * then show error page(404)
<Route path='*' element={<ErrorPage />}/>
</Routes>
<Footer/>
</ThemeProvider>
);
}
export default App;
//What is inside the App will render on every page, so the nav and the footer can be added here to apppear on every page.
content_copyCOPY
https://www.youtube.com/watch?v=Ul3y1LXxzdU&t=1532s
Comments