React js：錯誤：useLocation（）只能在a的上下文中使用<router>成分</router>

Question

我使用的是 React Router v6，每次我在主文件中使用初始化進行身份驗證時，它都會顯示此錯誤。 我無法在 inte.net 中找到解決方案。 我只想在有用戶時呈現一些路線，但現在它不呈現任何東西。

授權導航器

 import React, { useState, useEffect } from 'react'; import app from './firebase'; import { Router, Routes, Route } from 'react-router-dom'; import AuthStack from './stacks/AuthStack'; import AppStack from './stacks/AppStack'; import StaticStack from './stacks/StaticStack'; function AuthNavigator() { const [initializing, setInitializing] = useState(true); const [user, setUser] = useState(() => app.auth().currentUser); useEffect(() => { const unsubscribe = app.auth().onAuthStateChanged((user) => { if (user) { setUser(user); } else { setUser(null); } if (initializing) { setInitializing(false); } }); // cleanup subscription return unsubscribe; }, []); if (initializing) return 'Loading....'; return ( <Router> <Routes> <Route path="*" element={<StaticStack />} /> <Route path="auth/*" element={<AuthStack user={user} />} /> <Route path="app/*" element={<AppStack user={user} />} /> </Routes> </Router> ); } export default AuthNavigator;

應用程序.js

 import React from 'react'; import './App.css'; import AuthNavigator from './AuthNavigator'; import { Router } from 'react-router-dom'; function App() { return ( <Router> <AuthNavigator /> </Router> ); } export default App;

Answer 1

已經包裹在路由器中？

如果您的組件已經包裝在路由器中。 確保您從react-router-dom導入useLocation而不是react-router 。 這對我有用。

Answer 2

不要導入也不使用Routes這個組件不是由'react-router-dom'導出的

Answer 3

確保index.js中的 App 組件像這樣用BrowserRouter包裝

const app = (
  <Provider store={store}>
      <BrowserRouter>
          <App />
      </BrowserRouter>
  </Provider>
);

Answer 4

我遇到過同樣的問題。 我的問題是由於以下原因。 我有一個Header組件，它由作為路由器組件的NavLink組成。 我將這個Header組件放置在App組件中。 我的App組件是這樣的：

function App() {
  return(
      <Header/>
      <Router>
        <Routes>
          <Route path="/" element={<Homepage/>}/>
          <Route path="/shop" element={<Shop/>}/>
          <Route path="/signin" element={<Signin/>}/>
        </Routes>
      </Router>
  )
}

在上面的 App 組件中，我將 Header 組件放置在 Router 之外。 由於在Header組件中，我使用了作為路由器組件的NavLink導致此錯誤。 然后我將Header組件移動到路由器組件中，然后它工作正常。 最后我的代碼看起來像這樣：

function App() {
  return(
      <Router>
        <Header/>
        <Routes>
          <Route path="/" element={<Homepage/>}/>
          <Route path="/shop" element={<Shop/>}/>
          <Route path="/signin" element={<Signin/>}/>
        </Routes>
      </Router>
  )
}

Answer 5

試試上面 Sebastian Maj 的代碼：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

Answer 6

[我有同樣的錯誤。 我正在嘗試用鼠標滾動瀏覽我的不同頁面。 但是 web 頁面仍然是空白的。 控制台中沒有錯誤。 ][1]

Answer 7

我在測試中遇到了同樣的錯誤。 我正在測試的組件包含一個NavLink組件，並且我沒有在測試中渲染Router 。 用BrowserRouter包裝我的組件后，此錯誤消失了。

Answer 8

我有這個錯誤是因為 Vite 捆綁了相同版本的 react-router-dom 的兩個副本...檢查輸出的捆綁包中的* React Router DOM並查看有多少副本。

如果是這種情況，解決方案將有所不同。 在我的場景中，我認為這是因為我使用file: ...一旦我切換到修復它的 npm 工作區。

Answer 9

就我而言，當我使用HOC和上下文提供程序並將我的Routing組件放置為context.provider's子組件時，我遇到了這個錯誤，並通過 HOC 導出我的 Provider 組件，如下所示：

class Provider extends Component {

render() {
    return (
      <Context.Provider
        value={{
          something: this.state.something
        }}
      >
        <Routing />
      </Context.Provider>
    );
  }
}
export default HOC(Provider)

Answer 10

如果您在運行測試時遇到此問題，請不要忘記將 App 的導入也包含在 Router 中。 我的粗略例子如下。

import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';

import { App } from '../App';

test('renders Box', () => {
  render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
  const boxElement = screen.getByLabelText('box-outline');
  expect(boxElement).toBeInTheDocument();
});

Answer 11

所以我固定喜歡這個結構

index.js

import { BrowserRouter } from 'react-router-dom'

<Provider store={store}>
    <BrowserRouter>
        <App />
    </BrowserRouter>
</Provider>

應用程序.js

import { Route, Routes, Navigate } from 'react-router-dom'

<Layout>
  <Routes>
    <Route path="/" element={<Navigate to="/home" />} />
    <Route path="/home" element={<Home />} />
    {...}
    <Route path="*" element={<NotFound />} />
  </Routes>
</Layout>

布局.js

<Fragment>
  <Header></Header>
  <main className="container">{props.children}</main>
</Fragment>

Header.js

import { Link, NavLink } from 'react-router-dom'

<header className={classes.header}>
<nav>
  <NavLink
    className={(navData) => (navData.isActive ? classes.active : '')}
    to="/search"
  >
    Search
  </NavLink>
</nav>
</header>

應用程序.test.js

import { BrowserRouter } from 'react-router-dom';

it('renders learn react link', async () => {
  render(<BrowserRouter><App /></BrowserRouter>)
  const linkElement = await screen.findByText(/home/i)
  expect(linkElement).toBeInTheDocument()
})

Answer 12

我在使用{useLocation} from 'react-router-dom'時遇到了這個問題

function App() {
  const { pathname, hash, key } = useLocation();
  //function using pathname hash and key

  return(
    <Router>
      <Header/>
      <Routes>
        <Route path="/" element={<Homepage/>}/>
        <Route path="/shop" element={<Shop/>}/>
        <Route path="/signin" element={<Signin/>}/>
      </Routes>
    </Router>
  )
}

即使在正確的位置也會引發相同的錯誤我通過在路由器中顯式包裝 useLocation() 來修復它

function App() {
  return(
    <Router>
      <Header/>
      <Inner/>
    </Router>
  )
}
function Inner() {
  const { pathname, hash, key } = useLocation();
  //function using pathname hash and key

  return(
    <Routes>
      <Route path="/" element={<Homepage/>}/>
      <Route path="/shop" element={<Shop/>}/>
      <Route path="/signin" element={<Signin/>}/>
    </Routes>
  )
}

Answer 13

我的情況是，問題是將 BrowserRouter 放入 App.js 文件中，通過將其移至 index.js 文件並將其包裝在 App.js 中來解決

前 Index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
    <React.StrictMode>
      <PersistGate persistor={persistor} >
        <App/>
      </PersistGate>
    </React.StrictMode>
    </Provider>
  
);
reportWebVitals();

前 App.js

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

const App = () => {
  const {pathname} = useLocation()
  return (
    <div className='app'>
      <BrowserRouter>
          <Routes>
              <Route path='/*' element={<LandingPage />} />           
          </Routes>
       </BrowserRouter> 
    </div>
  );
};
export default App;

新索引.js

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
    <React.StrictMode>
      <PersistGate persistor={persistor} >
        <BrowserRouter >
            <App/>
        </BrowserRouter>
      </PersistGate>
    </React.StrictMode>
    </Provider>
  
);
reportWebVitals();

新建 App.js

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

const App = () => {
  const {pathname} = useLocation()
  return (
    <div className='app'>
        <Routes>
            <Route path='/*' element={<LandingPage />} />           
            <Route path='/registeration'  element={<Registration />} /> 
        </Routes>
    </div>
  );
};
export default App;

Answer 14

嘗試這個：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';