Popular Releases
Popular Libraries
New Libraries
Top Authors
Trending Kits
Trending Discussions
Learning
v4.1.1 | |
0.9.3 | |
v2.2.0-RC: Workflow for building release candidate (WIP) | |
Roman fonts version 2.038, Italic fonts version 1.058 and VAR fonts version 1.018 (OTF, TTF, WOFF, WOFF2) | |
Version 1.2.4 |
animate.css v4.1.1 |
bulma 0.9.3 |
nerd-fonts v2.2.0-RC: Workflow for building release candidate (WIP) |
source-code-pro Roman fonts version 2.038, Italic fonts version 1.058 and VAR fonts version 1.018 (OTF, TTF, WOFF, WOFF2) |
pace Version 1.2.4 |
1
827 Libraries
1
2
627 Libraries
0
3
585 Libraries
5
4
419 Libraries
0
5
290 Libraries
1
6
208 Libraries
0
7
199 Libraries
0
8
198 Libraries
10
9
181 Libraries
288
10
171 Libraries
12644
1
827 Libraries
1
2
627 Libraries
0
3
585 Libraries
5
4
419 Libraries
0
5
290 Libraries
1
6
208 Libraries
0
7
199 Libraries
0
8
198 Libraries
10
9
181 Libraries
288
10
171 Libraries
12644
QUESTION
Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences
Asked 2022-Mar-30 at 02:44I have a navbar that is rendered in every route while the route changes on click.
./components/navbar.jsx
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49
./components/experiences.jsx
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53
54 render() {
55 return (
56 <div>
57 <h1>hi</h1>
58 </div>
59 );
60 }
61}
62
63export default Experiences;
64
index.js
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53
54 render() {
55 return (
56 <div>
57 <h1>hi</h1>
58 </div>
59 );
60 }
61}
62
63export default Experiences;
64import React from 'react';
65import ReactDOM from 'react-dom';
66import './index.css';
67import reportWebVitals from './reportWebVitals';
68import Navbar from './components/Navbar';
69import Home from './components/Home';
70import Experiences from './components/experience';
71
72import {
73 BrowserRouter as Router,
74 Routes,
75 Route
76} from 'react-router-dom';
77
78
79
80ReactDOM.render(
81
82 <React.StrictMode>
83
84 <Navbar />
85
86 <Router>
87
88 <Routes>
89 <Route path="/" element={<Home />} />
90 <Route path="/experiences" element={<Experiences />} />
91 </Routes>
92
93 </Router>
94
95 </React.StrictMode>,
96
97 document.getElementById('root')
98);
99
100
101reportWebVitals();
102
The error doesn't come when I remove the <Link>
from the experiences tag in navbar.
There is a similar question posted here: Error: useHref() may be used only in the context of a <Router> component
but doesn't help.
I'm using react router v6
ANSWER
Answered 2022-Feb-09 at 23:28You are rendering the navbar outside the routing context. The Router
isn't aware of what routes the links are attempting to link to that it is managing. The reason routing works when directly navigating to "/experiences"
is because the Router
is aware of the URL when the app mounts.
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53
54 render() {
55 return (
56 <div>
57 <h1>hi</h1>
58 </div>
59 );
60 }
61}
62
63export default Experiences;
64import React from 'react';
65import ReactDOM from 'react-dom';
66import './index.css';
67import reportWebVitals from './reportWebVitals';
68import Navbar from './components/Navbar';
69import Home from './components/Home';
70import Experiences from './components/experience';
71
72import {
73 BrowserRouter as Router,
74 Routes,
75 Route
76} from 'react-router-dom';
77
78
79
80ReactDOM.render(
81
82 <React.StrictMode>
83
84 <Navbar />
85
86 <Router>
87
88 <Routes>
89 <Route path="/" element={<Home />} />
90 <Route path="/experiences" element={<Experiences />} />
91 </Routes>
92
93 </Router>
94
95 </React.StrictMode>,
96
97 document.getElementById('root')
98);
99
100
101reportWebVitals();
102<Navbar /> // <-- outside router!!
103
104<Router>
105 <Routes>
106 <Route path="/" element={<Home />} />
107 <Route path="/experiences" element={<Experiences />} />
108 </Routes>
109</Router>
110
Move it inside the routing context so the Router
is aware and can manage routing correctly.
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53
54 render() {
55 return (
56 <div>
57 <h1>hi</h1>
58 </div>
59 );
60 }
61}
62
63export default Experiences;
64import React from 'react';
65import ReactDOM from 'react-dom';
66import './index.css';
67import reportWebVitals from './reportWebVitals';
68import Navbar from './components/Navbar';
69import Home from './components/Home';
70import Experiences from './components/experience';
71
72import {
73 BrowserRouter as Router,
74 Routes,
75 Route
76} from 'react-router-dom';
77
78
79
80ReactDOM.render(
81
82 <React.StrictMode>
83
84 <Navbar />
85
86 <Router>
87
88 <Routes>
89 <Route path="/" element={<Home />} />
90 <Route path="/experiences" element={<Experiences />} />
91 </Routes>
92
93 </Router>
94
95 </React.StrictMode>,
96
97 document.getElementById('root')
98);
99
100
101reportWebVitals();
102<Navbar /> // <-- outside router!!
103
104<Router>
105 <Routes>
106 <Route path="/" element={<Home />} />
107 <Route path="/experiences" element={<Experiences />} />
108 </Routes>
109</Router>
110<Router>
111 <Navbar />
112 <Routes>
113 <Route path="/" element={<Home />} />
114 <Route path="/experiences" element={<Experiences />} />
115 </Routes>
116</Router>
117
Community Discussions contain sources that include Stack Exchange Network
QUESTION
Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences
Asked 2022-Mar-30 at 02:44I have a navbar that is rendered in every route while the route changes on click.
./components/navbar.jsx
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49
./components/experiences.jsx
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53
54 render() {
55 return (
56 <div>
57 <h1>hi</h1>
58 </div>
59 );
60 }
61}
62
63export default Experiences;
64
index.js
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53
54 render() {
55 return (
56 <div>
57 <h1>hi</h1>
58 </div>
59 );
60 }
61}
62
63export default Experiences;
64import React from 'react';
65import ReactDOM from 'react-dom';
66import './index.css';
67import reportWebVitals from './reportWebVitals';
68import Navbar from './components/Navbar';
69import Home from './components/Home';
70import Experiences from './components/experience';
71
72import {
73 BrowserRouter as Router,
74 Routes,
75 Route
76} from 'react-router-dom';
77
78
79
80ReactDOM.render(
81
82 <React.StrictMode>
83
84 <Navbar />
85
86 <Router>
87
88 <Routes>
89 <Route path="/" element={<Home />} />
90 <Route path="/experiences" element={<Experiences />} />
91 </Routes>
92
93 </Router>
94
95 </React.StrictMode>,
96
97 document.getElementById('root')
98);
99
100
101reportWebVitals();
102
The error doesn't come when I remove the <Link>
from the experiences tag in navbar.
There is a similar question posted here: Error: useHref() may be used only in the context of a <Router> component
but doesn't help.
I'm using react router v6
ANSWER
Answered 2022-Feb-09 at 23:28You are rendering the navbar outside the routing context. The Router
isn't aware of what routes the links are attempting to link to that it is managing. The reason routing works when directly navigating to "/experiences"
is because the Router
is aware of the URL when the app mounts.
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53
54 render() {
55 return (
56 <div>
57 <h1>hi</h1>
58 </div>
59 );
60 }
61}
62
63export default Experiences;
64import React from 'react';
65import ReactDOM from 'react-dom';
66import './index.css';
67import reportWebVitals from './reportWebVitals';
68import Navbar from './components/Navbar';
69import Home from './components/Home';
70import Experiences from './components/experience';
71
72import {
73 BrowserRouter as Router,
74 Routes,
75 Route
76} from 'react-router-dom';
77
78
79
80ReactDOM.render(
81
82 <React.StrictMode>
83
84 <Navbar />
85
86 <Router>
87
88 <Routes>
89 <Route path="/" element={<Home />} />
90 <Route path="/experiences" element={<Experiences />} />
91 </Routes>
92
93 </Router>
94
95 </React.StrictMode>,
96
97 document.getElementById('root')
98);
99
100
101reportWebVitals();
102<Navbar /> // <-- outside router!!
103
104<Router>
105 <Routes>
106 <Route path="/" element={<Home />} />
107 <Route path="/experiences" element={<Experiences />} />
108 </Routes>
109</Router>
110
Move it inside the routing context so the Router
is aware and can manage routing correctly.
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';