Sign in with
By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
Sign in with
By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
Sign in with
By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
Sign in with
By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
CSS is a styling language used to beautify a web page.With CSS, a developer can make their website more attractive, user friendly. Try our curated libraries for different functionalities of CSS.
Popular New Releases in CSS
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 |
Popular Libraries in CSS
Trending New libraries in CSS
Top Authors in CSS
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
Trending Kits in CSS
Trending Discussions on CSS
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;
64index.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();
102The 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:28Issue
You 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>
110Solution
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;
64index.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();
102The 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:28Issue
You 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>
110Solution
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';