react-router-dom's Route do not work in my project-CodePudding

I'm in the very first step to create an project, but the react-router-dom's 'Route' just don't work. When i try to use it, just erase all other things in the screen.

My app.js:

import { BrowserRouter, Route } from 'react-router-dom';
import './App.css';
import Header from './components/Header';
import CoinPage from './Pages/CoinPage';
import Homepage from './Pages/Homepage';



function App() {
  return (


    <BrowserRouter>
      <div>
        <Header />
        <Route path="/" component={Homepage} />
        <Route path="/coins/:id" component={CoinPage} />
      </div>
    </BrowserRouter>


  );
}

export default App;

My CoinPage.js:

import React from 'react'

const CoinPage = () => {
  return (
    <div>
        Coin Page
    </div>
  )
}

export default CoinPage

My Homepage.js:

import React from 'react'

export const Homepage = () => {
  return (
    <div>
        Homepage
    </div>
  )
}

export default Homepage

My Header.js:

import React from 'react'



/*The header it self:*/
export const Header = () => {
  return (
    <div>
        Header
    </div>
  )
}

export default Header

When I remove <Route path="/" component={Homepage}/> and <Route path="/coins/:id" component={CoinPage} /> the 'Header' component appears again

CodePudding user response：

You need to wrap all your Route inside Routes Component

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

<BrowserRouter>
      <div>
        <Header />
          <Routes>
           <Route path="/" component={Homepage} />
           <Route path="/coins/:id" component={CoinPage} />
         </Routes>
      </div>
</BrowserRouter>

If you are using v6, then component has been replaced by element in Route

<Route path="/" element={<Homepage />} />
<Route path="/coins/:id" element={<CoinPage />} />

CodePudding user response：

Solved!

I needed to change component to element and put each Route in a different Routes tag. Like that:

<BrowserRouter>
      <div>
        <Header />
        <Routes>
          <Route path="/" element={<Homepage />} />
        </Routes>
        
        <Routes>
          <Route path="/coins/:id" element={<Coinpage />} />
        </Routes>    
      </div>
</BrowserRouter>