I am very beginner in React and while I was practicing Router, I found that does not return the related component. below is the code. p.s. BrowserRouter works properly is the Hello world has been rendered.
import React, {Component} from 'react';
import {Route, BrowserRouter} from 'react-router-dom';
import './App.css';
import MainPage from './MainPage';
import About from './About';
class App extends Component {
render(){
return (
<BrowserRouter>
<div> Hello world</div>
<Route exact path="/" component={MainPage}/>
<Route path="about" component={About}/>
</BrowserRouter>
);
}
}
export default App;
if you use react-router-dom^6
import {Route, BrowserRouter, Routes} from 'react-router-dom';
<BrowserRouter>
<div> Hello world</div>
<Routes>
<Route exact path="/" element={<MainPage />} />
<Route exact path="/about" element={<About />} />
</Routes>
</BrowserRouter>
or you use react-router-dom^5
import {Route, BrowserRouter, Switch} from 'react-router-dom';
<BrowserRouter>
<div> Hello world</div>
<Switch>
<Route exact path="/" component={MainPage}/>
<Route path="/about" component={About}/>
</Switch>
</BrowserRouter>
For react router dom 6 it should be element:
import { render } from "react-dom";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
// import your route components too
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="teams" element={<Teams />}>
<Route path=":teamId" element={<Team />} />
<Route path="new" element={<NewTeamForm />} />
<Route index element={<LeagueStandings />} />
</Route>
</Route>
</Routes>
</BrowserRouter>,
document.getElementById("root")
);
Sources: https://reactrouter.com/docs/en/v6/getting-started/overview
add / before about route and add Switch or Routes (according to the installed version) to it
import React, {Component} from 'react';
import {Route, BrowserRouter, Switch} from 'react-router-dom';
import './App.css';
import MainPage from './MainPage';
import About from './About';
class App extends Component {
render(){
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={MainPage}/>
<Route path="/about" component={About}/>
<Switch>
</BrowserRouter>
);
}
}
export default App;