React (Routes and Redirect) component does not working-CodePudding

import { Routes, Redirect } from 'react-router-dom';

const Body = () => {
  return (
    <div>
      <Route path="/" component={Home} />
      <Route path="/menu" component={Menu} />
      <Route path="/contact" component={Contact} />
      <Route path="/about" component={About} />
    </div>
  );
};

export default Body;

CodePudding user response：

instead <div> wrap you routes to <Router> and <Switch> like this:

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

....
return (
 <Router>
  <Switch>
     <Route ...>
      ....
  </Switch>
 </Router>
)

CodePudding user response：

I don't see where any redirect is being used, but for the provided code example:

If you are trying to use react-router-dom@5 then there is no exported Routes component. Import Route and Switch and render accordingly. Remember to order the routes in inverse order of path specificity.

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

const Body = () => {
  return (
    <div>
      <Switch>
        <Route path="/menu" component={Menu} />
        <Route path="/contact" component={Contact} />
        <Route path="/about" component={About} />
        <Route path="/" component={Home} />
      </Switch>
    </div>
  );
};

If you are using react-router-dom@6 then import the Route component for the routes. The Routes component wraps the Route components. Remember that RRDv6 Route components render their content on the element prop as JSX. Route order doesn't matter now as a route ranking system is used.

import { Routes, Route } from 'react-router-dom';

const Body = () => {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/menu" element={<Menu />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};