I am trying to learn web development using react but am stuck in this situation where I am unable to find why the view is not being loaded. Please, someone, guide me.
App.js
import React, {Component} from 'react';
import {BrowserRouter, Route, Link, Routes} from 'react-router-dom';
import Buyer from './Container/Buyer/Buyer';
import Seller from './Container/Seller/Seller';
import classes from './App.css';
class App extends Component{
render(){
return(
<BrowserRouter>
<div className={classes.App}>
<p>Shop</p>
<Link to='/buyer'>I want to Buy</Link>
<Link to='/seller'>I want to Sell</Link>
<Routes>
<Route path="/buyer" exact render={Buyer} />
<Route path="/seller" exact component={Seller} />
</Routes>
</div>
</BrowserRouter>
)
}
}
export default App;
Buyer.js
import React, {Component} from 'react';
import classes from './Buyer.css';
class Buyer extends Component{
render(){
return(
<div className={classes.Buyer}>
<p>I want to buy groceries</p>
</div>
);
}
}
export default Buyer;
Seller.js
import React, {Component} from 'react';
class Seller extends Component{
render(){
return(
<div>
<p>I want to sell groceries</p>
</div>
);
}
}
export default Seller;
After clicking the link "I want to buy" the view showing "I want to buy groceries" should have appeared but nothing is appearing.
CodePudding user response:
In react-router-dom
v6 the Route
components no longer take exact
, render
, and component
props, they now only take path
and element
. The element
prop is passed a JSX literal.
Example:
<Route path="/buyer" element={<Buyer />} />
App
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<p>Shop</p>
<Link to="/buyer">I want to Buy</Link>
<Link to="/seller">I want to Sell</Link>
<Routes>
<Route path="/buyer" element={<Buyer />} />
<Route path="/seller" element={<Seller />} />
</Routes>
</div>
</BrowserRouter>
);
}
}