import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Projects from './components/Projects';
import About from './components/About';
function App() {
return(
<>
<Router>
<Navbar />
<Home />
<Projects />
<About/>
</Router>
</>
);
}
export default App;
This is the code in './Projects':
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function Projects() {
return (
<h1>Proj</h1>
);
}
export default Projects;
When I click the link for the Projects page the link doesn't display the content in function Projects(). Please help.
Try wrapping each component in a <Route> component. Something like this:
<Router>
<Route path="/route/to/projects">
<Projects/>
</Route>
</Router>
There are a few different ways to do this with React Router. If you don't like the way I did it you can find more options here: React Router Routes