I want to navigate to a new page depending on what is selected in a Material UI Select component. Here is the
SelectFoodChange.js :
import * as React from 'react';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
export default function SelectFoodChange() {
const [page, setPage] = React.useState('');
const handleChange = (event) => {
setPage(event.target.value);
};
return (
<div>
<FormControl sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="demo-simple-select-helper-label">Food Page</InputLabel>
<Select
value={page}
label="Food Page"
onChange={handleChange}
>
<MenuItem value="branded-foods">Branded Foods</MenuItem>
<MenuItem value="whole-foods">Whole Foods</MenuItem>
</Select>
</FormControl>
</div>
);
}
Here is Food page which imports SelectFoodPage component:
Food.js
import React from 'react';
import SelectFoodPage from './SelectFoodPage';
function Food() {
return (
<div className='Food'>
{<SelectFoodPage />}
</div>
);
}
export default Food;
Here is how I change pages depending on selected item in a burger menu:
App.js
import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Food from './pages/food/Food';
function App() {
return (
<>
<Router>
<Navbar />
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path='/food' element={<Food />}></Route>
</Routes>
</Router>
</>
)
}
export default App;
How do I navigate to a new page depending on what is selected in a Material UI Select component?