kandi background
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
kandi background
Explore Kits
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

    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
    ESlint - Error: Must use import to load ES Module
    Create-React-App creates this <iframe> that prevents me from clicking or editing directly the app unless I delete it in the elements browswer editor
    Switch' is not exported from 'react-router-dom'
    Type Error: this.getOptions is not a function For style-loader
    Module not found: Can't resolve 'swiper/css'
    My project doesn't compile with optimization parameters after upgrading from angular 11 to angular 12
    Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in the package.json of a module in node_modules
    Data path "" must NOT have additional properties(extractCss) in Angular 13 while upgrading project
    Tailwind V3 causing TypeError: Cannot read property '500' of undefined

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:44

I 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:28

Issue

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.

copy icondownload icon

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            &lt;div id = 'navbar'&gt;
15
16                &lt;div className='name-head'&gt;
17                    My Name
18                &lt;/div&gt;
19            
20            
21                &lt;div id = 'nav-links-container'&gt;
22                    
23                    &lt;Link to='/experiences'&gt;
24                        &lt;div className = 'nav-links'&gt;
25                            Experiences
26                        &lt;/div&gt;
27                    &lt;/Link&gt;
28
29                    &lt;div className = 'nav-links'&gt;
30                        Projects
31                    &lt;/div&gt;
32
33                    &lt;div className = 'nav-links'&gt;
34                        Skills
35                    &lt;/div&gt;
36
37                    &lt;div className = 'nav-links'&gt;
38                        Resume
39                    &lt;/div&gt;
40
41                &lt;/div&gt;
42                
43            &lt;/div&gt;
44        );
45    }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53    
54    render() { 
55        return (
56            &lt;div&gt;
57                &lt;h1&gt;hi&lt;/h1&gt;
58            &lt;/div&gt;
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  &lt;React.StrictMode&gt;
83
84    &lt;Navbar /&gt;
85
86    &lt;Router&gt;
87
88      &lt;Routes&gt;
89        &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
90        &lt;Route path=&quot;/experiences&quot; element={&lt;Experiences /&gt;} /&gt;
91      &lt;/Routes&gt;
92
93    &lt;/Router&gt;
94
95  &lt;/React.StrictMode&gt;,
96
97  document.getElementById('root')
98);
99
100
101reportWebVitals();
102&lt;Navbar /&gt; // &lt;-- outside router!!
103
104&lt;Router&gt;
105  &lt;Routes&gt;
106    &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
107    &lt;Route path=&quot;/experiences&quot; element={&lt;Experiences /&gt;} /&gt;
108  &lt;/Routes&gt;
109&lt;/Router&gt;
110

Solution

Move it inside the routing context so the Router is aware and can manage routing correctly.

copy icondownload icon

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            &lt;div id = 'navbar'&gt;
15
16                &lt;div className='name-head'&gt;
17                    My Name
18                &lt;/div&gt;
19            
20            
21                &lt;div id = 'nav-links-container'&gt;
22                    
23                    &lt;Link to='/experiences'&gt;
24                        &lt;div className = 'nav-links'&gt;
25                            Experiences
26                        &lt;/div&gt;
27                    &lt;/Link&gt;
28
29                    &lt;div className = 'nav-links'&gt;
30                        Projects
31                    &lt;/div&gt;
32
33                    &lt;div className = 'nav-links'&gt;
34                        Skills
35                    &lt;/div&gt;
36
37                    &lt;div className = 'nav-links'&gt;
38                        Resume
39                    &lt;/div&gt;
40
41                &lt;/div&gt;
42                
43            &lt;/div&gt;
44        );
45    }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53    
54    render() { 
55        return (
56            &lt;div&gt;
57                &lt;h1&gt;hi&lt;/h1&gt;
58            &lt;/div&gt;
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  &lt;React.StrictMode&gt;
83
84    &lt;Navbar /&gt;
85
86    &lt;Router&gt;
87
88      &lt;Routes&gt;
89        &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
90        &lt;Route path=&quot;/experiences&quot; element={&lt;Experiences /&gt;} /&gt;
91      &lt;/Routes&gt;
92
93    &lt;/Router&gt;
94
95  &lt;/React.StrictMode&gt;,
96
97  document.getElementById('root')
98);
99
100
101reportWebVitals();
102&lt;Navbar /&gt; // &lt;-- outside router!!
103
104&lt;Router&gt;
105  &lt;Routes&gt;
106    &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
107    &lt;Route path=&quot;/experiences&quot; element={&lt;Experiences /&gt;} /&gt;
108  &lt;/Routes&gt;
109&lt;/Router&gt;
110&lt;Router&gt;
111  &lt;Navbar /&gt;
112  &lt;Routes&gt;
113    &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
114    &lt;Route path=&quot;/experiences&quot; element={&lt;Experiences /&gt;} /&gt;
115  &lt;/Routes&gt;
116&lt;/Router&gt;
117

Source https://stackoverflow.com/questions/70220413

Community Discussions contain sources that include Stack Exchange Network

    Error: useHref() may be used only in the context of a &lt;Router&gt; component. It works when I directly put the url as localhost:3000/experiences
    ESlint - Error: Must use import to load ES Module
    Create-React-App creates this &lt;iframe&gt; that prevents me from clicking or editing directly the app unless I delete it in the elements browswer editor
    Switch' is not exported from 'react-router-dom'
    Type Error: this.getOptions is not a function For style-loader
    Module not found: Can't resolve 'swiper/css'
    My project doesn't compile with optimization parameters after upgrading from angular 11 to angular 12
    Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by &quot;exports&quot; in the package.json of a module in node_modules
    Data path &quot;&quot; must NOT have additional properties(extractCss) in Angular 13 while upgrading project
    Tailwind V3 causing TypeError: Cannot read property '500' of undefined

QUESTION

Error: useHref() may be used only in the context of a &lt;Router&gt; component. It works when I directly put the url as localhost:3000/experiences

Asked 2022-Mar-30 at 02:44

I 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            &lt;div id = 'navbar'&gt;
15
16                &lt;div className='name-head'&gt;
17                    My Name
18                &lt;/div&gt;
19            
20            
21                &lt;div id = 'nav-links-container'&gt;
22                    
23                    &lt;Link to='/experiences'&gt;
24                        &lt;div className = 'nav-links'&gt;
25                            Experiences
26                        &lt;/div&gt;
27                    &lt;/Link&gt;
28
29                    &lt;div className = 'nav-links'&gt;
30                        Projects
31                    &lt;/div&gt;
32
33                    &lt;div className = 'nav-links'&gt;
34                        Skills
35                    &lt;/div&gt;
36
37                    &lt;div className = 'nav-links'&gt;
38                        Resume
39                    &lt;/div&gt;
40
41                &lt;/div&gt;
42                
43            &lt;/div&gt;
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            &lt;div id = 'navbar'&gt;
15
16                &lt;div className='name-head'&gt;
17                    My Name
18                &lt;/div&gt;
19            
20            
21                &lt;div id = 'nav-links-container'&gt;
22                    
23                    &lt;Link to='/experiences'&gt;
24                        &lt;div className = 'nav-links'&gt;
25                            Experiences
26                        &lt;/div&gt;
27                    &lt;/Link&gt;
28
29                    &lt;div className = 'nav-links'&gt;
30                        Projects
31                    &lt;/div&gt;
32
33                    &lt;div className = 'nav-links'&gt;
34                        Skills
35                    &lt;/div&gt;
36
37                    &lt;div className = 'nav-links'&gt;
38                        Resume
39                    &lt;/div&gt;
40
41                &lt;/div&gt;
42                
43            &lt;/div&gt;
44        );
45    }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53    
54    render() { 
55        return (
56            &lt;div&gt;
57                &lt;h1&gt;hi&lt;/h1&gt;
58            &lt;/div&gt;
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            &lt;div id = 'navbar'&gt;
15
16                &lt;div className='name-head'&gt;
17                    My Name
18                &lt;/div&gt;
19            
20            
21                &lt;div id = 'nav-links-container'&gt;
22                    
23                    &lt;Link to='/experiences'&gt;
24                        &lt;div className = 'nav-links'&gt;
25                            Experiences
26                        &lt;/div&gt;
27                    &lt;/Link&gt;
28
29                    &lt;div className = 'nav-links'&gt;
30                        Projects
31                    &lt;/div&gt;
32
33                    &lt;div className = 'nav-links'&gt;
34                        Skills
35                    &lt;/div&gt;
36
37                    &lt;div className = 'nav-links'&gt;
38                        Resume
39                    &lt;/div&gt;
40
41                &lt;/div&gt;
42                
43            &lt;/div&gt;
44        );
45    }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53    
54    render() { 
55        return (
56            &lt;div&gt;
57                &lt;h1&gt;hi&lt;/h1&gt;
58            &lt;/div&gt;
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  &lt;React.StrictMode&gt;
83
84    &lt;Navbar /&gt;
85
86    &lt;Router&gt;
87
88      &lt;Routes&gt;
89        &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
90        &lt;Route path=&quot;/experiences&quot; element={&lt;Experiences /&gt;} /&gt;
91      &lt;/Routes&gt;
92
93    &lt;/Router&gt;
94
95  &lt;/React.StrictMode&gt;,
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:28

Issue

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.

copy icondownload icon

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            &lt;div id = 'navbar'&gt;
15
16                &lt;div className='name-head'&gt;
17                    My Name
18                &lt;/div&gt;
19            
20            
21                &lt;div id = 'nav-links-container'&gt;
22                    
23                    &lt;Link to='/experiences'&gt;
24                        &lt;div className = 'nav-links'&gt;
25                            Experiences
26                        &lt;/div&gt;
27                    &lt;/Link&gt;
28
29                    &lt;div className = 'nav-links'&gt;
30                        Projects
31                    &lt;/div&gt;
32
33                    &lt;div className = 'nav-links'&gt;
34                        Skills
35                    &lt;/div&gt;
36
37                    &lt;div className = 'nav-links'&gt;
38                        Resume
39                    &lt;/div&gt;
40
41                &lt;/div&gt;
42                
43            &lt;/div&gt;
44        );
45    }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53    
54    render() { 
55        return (
56            &lt;div&gt;
57                &lt;h1&gt;hi&lt;/h1&gt;
58            &lt;/div&gt;
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  &lt;React.StrictMode&gt;
83
84    &lt;Navbar /&gt;
85
86    &lt;Router&gt;
87
88      &lt;Routes&gt;
89        &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
90        &lt;Route path=&quot;/experiences&quot; element={&lt;Experiences /&gt;} /&gt;
91      &lt;/Routes&gt;
92
93    &lt;/Router&gt;
94
95  &lt;/React.StrictMode&gt;,
96
97  document.getElementById('root')
98);
99
100
101reportWebVitals();
102&lt;Navbar /&gt; // &lt;-- outside router!!
103
104&lt;Router&gt;
105  &lt;Routes&gt;
106    &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
107    &lt;Route path=&quot;/experiences&quot; element={&lt;Experiences /&gt;} /&gt;
108  &lt;/Routes&gt;
109&lt;/Router&gt;
110

Solution

Move it inside the routing context so the Router is aware and can manage routing correctly.

copy icondownload icon

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            &lt;div id = 'navbar'&gt;
15
16                &lt;div className='name-head'&gt;
17                    My Name
18                &lt;/div&gt;
19            
20            
21                &lt;div id = 'nav-links-container'&gt;
22                    
23                    &lt;Link to='/experiences'&gt;
24                        &lt;div className = 'nav-links'&gt;
25                            Experiences
26                        &lt;/div&gt;
27                    &lt;/Link&gt;
28
29                    &lt;div className = 'nav-links'&gt;
30                        Projects
31                    &lt;/div&gt;
32
33                    &lt;div className = 'nav-links'&gt;
34                        Skills
35                    &lt;/div&gt;
36
37                    &lt;div className = 'nav-links'&gt;
38                        Resume
39                    &lt;/div&gt;
40
41                &lt;/div&gt;
42                
43            &lt;/div&gt;
44        );
45    }
46}
47
48export default Navbar;
49import React, { Component } from 'react';