我无法在反应 js 中使用路由器

Question

I have been trying to use a router on react project but getting an error :

A Route is only ever to be used as the child of Routes element, never rendered directly. Please wrap your Route in a Routes.

The Code Is Shown Below

import About from "./container/About";
import Profile from "./container/Profile";
import { useState } from "react";
import {BrowserRouter as Routes,Route} from 'react-router-dom'
function App(){
  const [state, setState] = useState('')
  return(
    <div className="App">
      <button onClick={()=>setState('about')}>About</button>
      <button onClick={()=>setState('profile')}>Profile</button>
      <Routes>
        <Route component={About} path='/about'></Route>
      </Routes>
    </div>
  )
}
export default App;

Answer 1

I'm not sure you can call the BrowserRouter component the way you did in your code. Perhaps if you wrap your code in the router - in a way that it's the topmost parent, such as this example and render your buttons inside of it then it should work fine.

Answer 2

If you're on version 6 of react-router-dom , you need to name the props differently:

<Route element={About} path='/about'></Route>

In version 5, it was named component .

I assume you're on version 6, because I can't remember version 5 having the Routes component. Also, you need to import the components differently, and wrap everything with the BrowserRouter.

import About from "./container/About";
import Profile from "./container/Profile";
import { useState } from "react";
import {BrowserRouter, Routes, Route} from 'react-router-dom'
function App(){
  const [state, setState] = useState('')
  return(
    <BrowserRouter>
      <div className="App">
        <button onClick={()=>setState('about')}>About</button>
        <button onClick={()=>setState('profile')}>Profile</button>
        <Routes>
          <Route element={<About />} path='/about'></Route>
        </Routes>
      </div>
    </BrowserRouter>
  )
}
export default App;

Answer 3

Put the path before the component

    <Route path='/about' element={About}></Route>

Also ,

Wrap your in the index.js file with BrowserRouter

<BrowserRouter>
<App/>
</BrowserRouter>