React Issue

發表於 分類於 Disqus：
文章字數： 2.3k 所需閱讀時間 ≈ 2 分鐘

use useLocation found error “TypeError: Cannot read properties of undefined (reading ‘location’)”

use useLocation doesn’t put same component as Router

issue code

1
2
3
4
5
6
7
8
9
10
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(
	<App />
	,
	document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// ./component/App/App.js
import React from "react";
import HomePage from "../../Pages/HomePage";
import LoginPage from "../../Pages/LoginPage"; 
import Header from "../Header";
import styled from 'styled-components';
import {
  // BrowserRouter as Router,
  // for SPA
  HashRouter as Router,
  Switch,
  useLocation,
  Route,
  // useLocation
} from "react-router-dom";

const Root =  styled.div`
  padding-top: 64px;
`;

export default function App() {
  let location = useLocation();
	console.log(location);
  return (
    <Root>
      <Router>
        <Header />
          <Switch>
            <Route exact path="/">
              <HomePage />
            </Route>
            <Route path="/login">
              <LoginPage />
            </Route>
          </Switch>
      </Router>
    </Root>
  );
}

fixed code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import {
  // BrowserRouter as Router,
  // for SPA
  HashRouter as Router,
} from "react-router-dom";


ReactDOM.render(
	<Router>
		<App />
	</Router>
	,
	document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// ./component/App/App.js
import React from "react";
import HomePage from "../../Pages/HomePage";
import LoginPage from "../../Pages/LoginPage"; 
import Header from "../Header";
import styled from 'styled-components';
import {
  Switch,
  useLocation,
  Route,
} from "react-router-dom";

const Root =  styled.div`
  padding-top: 64px;
`;

export default function App() {
  let location = useLocation();
	console.log(location.pathname);
  return (
    <Root>
    	<Header />
      <Switch>
        <Route exact path="/">
          <HomePage />
        </Route>
        <Route path="/login">
          <LoginPage />
        </Route>
      </Switch>
    </Root>
  );
}