Explore all Router open source software, libraries, packages, source code, cloud functions and APIs.
Popular New Releases in Router
react-router
vue-router
v3.5.3
mux
v1.8.0 ☀️
ui-router
1.0.29
ARouter
Optimization & Bugfix
Popular Libraries in Router
react-router
by remix-run 
typescript
46674 MIT
Declarative routing for React
react-router
by ReactTraining javascript
43698 MIT
Declarative routing for React
vue-router
by vuejs javascript
18742 MIT
🚦 The official router for Vue 2
mux
by gorilla go
15602 BSD-3-Clause
A powerful HTTP router and URL matcher for building Go web servers with 🦍
ui-router
by angular-ui typescript
13773 MIT
The de-facto solution to flexible routing with nested views in AngularJS
ARouter
by alibaba java
13244 Apache-2.0
💪 A framework for assisting in the renovation of Android componentization (帮助 Android App 进行组件化改造的路由框架)
httprouter
by julienschmidt go
12846 BSD-3-Clause
A high performance HTTP request router that scales well
martini
by go-martini go
11266 MIT
Classy web framework for Go
barba
by barbajs typescript
9474 MIT
Create badass, fluid and smooth transition between your website's pages.
Trending New libraries in Router
axum
by tokio-rs rust
4413 MIT
Ergonomic and modular web framework built with Tokio, Tower, and Hyper
whoami
by omer-dogan shell
873 GPL-3.0
Whoami is a privacy tool developed to keep you anonymous on Debian-based linux operating systems at the highest level.
thgtoa
by AnonymousPlanet html
871 NOASSERTION
The Hitchhiker’s Guide to Online Anonymity
newbee-mall-vue-app
by newbee-ltd javascript
708 GPL-3.0
新蜂商城前后端分离版本-前端Vue项目源码
newbee-mall-vue3-app
by newbee-ltd javascript
648 GPL-3.0
新蜂商城Vue3版本
react-keepalive-router
by GoodLuckAlien javascript
600
The react cache component developed based on react 16.8 +, react router 4 + can be used to cache page components, similar to Vue keepalive package Vue router effect function.(基于react 16.8+ ,react-router 4+ 开发的react缓存组件，可以用于缓存页面组件，类似vue的keepalive包裹vue-router的效果功能)。
DRouter
by didi java
503 Apache-2.0
Android Router Framework
tinro
by AlexxNB javascript
432 MIT
Highly declarative, tiny, dependency free router for Svelte's web applications.
svelte-navigator
by mefechoel javascript
310 NOASSERTION
Simple, accessible routing for Svelte
Top Authors in Router
1
9 Libraries
1244
2
9 Libraries
672
3
8 Libraries
345
4
8 Libraries
87
5
8 Libraries
796
6
8 Libraries
433
7
7 Libraries
791
8
7 Libraries
3272
9
7 Libraries
861
10
6 Libraries
71
1
9 Libraries
1244
2
9 Libraries
672
3
8 Libraries
345
4
8 Libraries
87
5
8 Libraries
796
6
8 Libraries
433
7
7 Libraries
791
8
7 Libraries
3272
9
7 Libraries
861
10
6 Libraries
71
Trending Kits in Router
No Trending Kits are available at this moment for Router
Trending Discussions on Router
is there a way to set a default route with React-Router v6
useNavigate() may be used only in the context of a <Router> component
AngularFireModule and AngularFireDatabaseModule not being found in @angular/fire
Error: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
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
react router v6 navigate outside of components
The unauthenticated git protocol on port 9418 is no longer supported
What is the alternative for Redirect in react-router-dom v 6.0.0?
How to redirect in React Router v6?
Error: [PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
QUESTION
is there a way to set a default route with React-Router v6
Asked 2022-Apr-04 at 17:48I just can't find a way to set a default route with react-router v6
Is it because it's not good programming anymore?
Can somebody tell me why?
Thanks in advance
Rafael
ANSWER
Answered 2022-Apr-04 at 17:48If I understand your question about a "default" route correctly then I am interpreting this as one of the following:
Use an
indexroute:You can wrap a set of routes in a layout route and specify an
indexroute:
1 <Routes>
2 <Route path="/*">
3 <Route index element={<ComponentA />} />
4 <Route path="pathB" element={<ComponentB />} />
5 <Route path="pathC" element={<ComponentC />} />
6 </Route>
7 </Routes>
8The index route is the route that will be matched and rendered when the path exactly matches the root parent route's path.
Redirect to a "default" route if no other routes match:
You can also render a redirect to the route you consider to be the "default" route.
1 <Routes>
2 <Route path="/*">
3 <Route index element={<ComponentA />} />
4 <Route path="pathB" element={<ComponentB />} />
5 <Route path="pathC" element={<ComponentC />} />
6 </Route>
7 </Routes>
8 <Routes>
9 <Route path="/pathA element={<ComponentA />} />
10 <Route path="/pathB" element={<ComponentB />} />
11 <Route path="/pathC" element={<ComponentC />} />
12 <Route path="*" element={<Navigate to="/pathA" replace />} />
13 </Routes>
14QUESTION
useNavigate() may be used only in the context of a <Router> component
Asked 2022-Apr-02 at 20:39My code currently is this and I'm trying to add this button that goes back to the previous page using react-router-dom but I get an error saying 'useNavigate() may be used only in the context of a component.' and also all the components on my website disappears.
1function App() {
2 const navigate = useNavigate();
3 return (
4 <BrowserRouter>
5 <div>
6 <button onClick={() => navigate(-1)}>go back</button>
7 <Nav/>
8 <Routes>
9 <Route exact path="/" element={<Home/>}/>
10 <Route exact path="/home" element={<Home/>}/>
11 <Route exact path="/upcoming/:user" element={<Upcoming/>}/>
12 <Route exact path="/record/:user" element={<Record/>}/>
13 <Route path="*" element={<NotFound/>}/>
14 </Routes>
15 </div>
16 </BrowserRouter>
17 );
18}
19This is the error I got in console
ANSWER
Answered 2022-Mar-08 at 07:27This error throws in useNavigate. useInRouterContext will check if the component is a descendant of a <Router>.
Here's the source code to explain why you can't use useNavigate, useLocation outside of the Router component:
useNavigate uses useLocation underly, useLocation will get the location from LocationContext. If you want to get the react context, you should render the component as the descendant of a context provider.
Router component use the LocationContext.Provider and NavigationContext.Provider. That's why you need to render the component as the children, so that useNavigate hook can get the context data from NavigationContext and LocationContext providers.
Your environment is browser, so you need to use BrowserRouter. BrowserRouter is built based on Router.
Refactor to this:
App.jsx:
1function App() {
2 const navigate = useNavigate();
3 return (
4 <BrowserRouter>
5 <div>
6 <button onClick={() => navigate(-1)}>go back</button>
7 <Nav/>
8 <Routes>
9 <Route exact path="/" element={<Home/>}/>
10 <Route exact path="/home" element={<Home/>}/>
11 <Route exact path="/upcoming/:user" element={<Upcoming/>}/>
12 <Route exact path="/record/:user" element={<Record/>}/>
13 <Route path="*" element={<NotFound/>}/>
14 </Routes>
15 </div>
16 </BrowserRouter>
17 );
18}
19function App() {
20 const navigate = useNavigate();
21 return (
22 <div>
23 <button onClick={() => navigate(-1)}>go back</button>
24 <Nav/>
25 <Routes>
26 <Route exact path="/" element={<Home/>}/>
27 <Route exact path="/home" element={<Home/>}/>
28 <Route exact path="/upcoming/:user" element={<Upcoming/>}/>
29 <Route exact path="/record/:user" element={<Record/>}/>
30 <Route path="*" element={<NotFound/>}/>
31 </Routes>
32 </div>
33 );
34}
35index.jsx:
1function App() {
2 const navigate = useNavigate();
3 return (
4 <BrowserRouter>
5 <div>
6 <button onClick={() => navigate(-1)}>go back</button>
7 <Nav/>
8 <Routes>
9 <Route exact path="/" element={<Home/>}/>
10 <Route exact path="/home" element={<Home/>}/>
11 <Route exact path="/upcoming/:user" element={<Upcoming/>}/>
12 <Route exact path="/record/:user" element={<Record/>}/>
13 <Route path="*" element={<NotFound/>}/>
14 </Routes>
15 </div>
16 </BrowserRouter>
17 );
18}
19function App() {
20 const navigate = useNavigate();
21 return (
22 <div>
23 <button onClick={() => navigate(-1)}>go back</button>
24 <Nav/>
25 <Routes>
26 <Route exact path="/" element={<Home/>}/>
27 <Route exact path="/home" element={<Home/>}/>
28 <Route exact path="/upcoming/:user" element={<Upcoming/>}/>
29 <Route exact path="/record/:user" element={<Record/>}/>
30 <Route path="*" element={<NotFound/>}/>
31 </Routes>
32 </div>
33 );
34}
35import ReactDOM from 'react-dom';
36import { BrowserRouter } from 'react-router-dom';
37import App from './App';
38
39ReactDOM.render(
40 <BrowserRouter>
41 <App/>
42 </BrowserRouter>,
43 document.getElementById('root')
44)
45QUESTION
AngularFireModule and AngularFireDatabaseModule not being found in @angular/fire
Asked 2022-Apr-01 at 12:56I am trying to implement Firebase Realtime Database into a angular project and Im getting stuck at one of the very first steps. Importing AngularFireModule and AngularFireDatabaseModule. It gives me the following error:
1Module '"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305)
21Module '"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305)
2Module '"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.
3And here is how I am importing them:
1Module '"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305)
2Module '"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.
3import {AngularFireModule } from '@angular/fire';
4import {AngularFireDatabaseModule} from '@angular/fire/database'
5Am I missing something here? I have installed @angular/fire via the command
1Module '"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305)
2Module '"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.
3import {AngularFireModule } from '@angular/fire';
4import {AngularFireDatabaseModule} from '@angular/fire/database'
5npm i firebase @angular/fire
6and have also installed firebase tools. Here is a list of the Angular packages I currently have installed and their versions:
1Module '"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305)
2Module '"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.
3import {AngularFireModule } from '@angular/fire';
4import {AngularFireDatabaseModule} from '@angular/fire/database'
5npm i firebase @angular/fire
6Angular CLI: 12.2.2
7Node: 14.17.4
8Package Manager: npm 6.14.14
9OS: win32 x64
10
11Angular: 12.2.3
12... animations, common, compiler, compiler-cli, core, forms
13... platform-browser, platform-browser-dynamic, router
14
15Package Version
16---------------------------------------------------------
17@angular-devkit/architect 0.1202.2
18@angular-devkit/build-angular 12.2.2
19@angular-devkit/core 12.2.2
20@angular-devkit/schematics 12.2.2
21@angular/cli 12.2.2
22@angular/fire 7.0.0
23@schematics/angular 12.2.2
24rxjs 6.6.7
25typescript 4.3.5
26I do apologise if this is all excessive information but I am completely stuck as to what the issue is. Any help would be GREATLY appreciated. Right now my suspicion is that its a compatibility issue or perhaps a feature that doesnt exist anymore on the latest versions but I really dont know.
ANSWER
Answered 2021-Aug-26 at 13:20AngularFire 7.0.0 was launched yesterday with a new API that has a lot of bundle size reduction benefits.
Instead of top level classes like AngularFireDatabase, you can now import smaller independent functions.
1Module '"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305)
2Module '"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.
3import {AngularFireModule } from '@angular/fire';
4import {AngularFireDatabaseModule} from '@angular/fire/database'
5npm i firebase @angular/fire
6Angular CLI: 12.2.2
7Node: 14.17.4
8Package Manager: npm 6.14.14
9OS: win32 x64
10
11Angular: 12.2.3
12... animations, common, compiler, compiler-cli, core, forms
13... platform-browser, platform-browser-dynamic, router
14
15Package Version
16---------------------------------------------------------
17@angular-devkit/architect 0.1202.2
18@angular-devkit/build-angular 12.2.2
19@angular-devkit/core 12.2.2
20@angular-devkit/schematics 12.2.2
21@angular/cli 12.2.2
22@angular/fire 7.0.0
23@schematics/angular 12.2.2
24rxjs 6.6.7
25typescript 4.3.5
26import { list } from '@angular/fire/database';
27The initialization process is a bit different too as it has a more flexible API for specifying configurations.
1Module '"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305)
2Module '"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.
3import {AngularFireModule } from '@angular/fire';
4import {AngularFireDatabaseModule} from '@angular/fire/database'
5npm i firebase @angular/fire
6Angular CLI: 12.2.2
7Node: 14.17.4
8Package Manager: npm 6.14.14
9OS: win32 x64
10
11Angular: 12.2.3
12... animations, common, compiler, compiler-cli, core, forms
13... platform-browser, platform-browser-dynamic, router
14
15Package Version
16---------------------------------------------------------
17@angular-devkit/architect 0.1202.2
18@angular-devkit/build-angular 12.2.2
19@angular-devkit/core 12.2.2
20@angular-devkit/schematics 12.2.2
21@angular/cli 12.2.2
22@angular/fire 7.0.0
23@schematics/angular 12.2.2
24rxjs 6.6.7
25typescript 4.3.5
26import { list } from '@angular/fire/database';
27@NgModule({
28 imports: [
29 provideFirebaseApp(() => initializeApp(config)),
30 provideFirestore(() => {
31 const firestore = getFirestore();
32 connectEmulator(firestore, 'localhost', 8080);
33 enableIndexedDbPersistence(firestore);
34 return firestore;
35 }),
36 provideStorage(() => getStorage()),
37 ],
38})
39If you want to proceed with the older API there's a compatibility layer.
1Module '"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305)
2Module '"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.
3import {AngularFireModule } from '@angular/fire';
4import {AngularFireDatabaseModule} from '@angular/fire/database'
5npm i firebase @angular/fire
6Angular CLI: 12.2.2
7Node: 14.17.4
8Package Manager: npm 6.14.14
9OS: win32 x64
10
11Angular: 12.2.3
12... animations, common, compiler, compiler-cli, core, forms
13... platform-browser, platform-browser-dynamic, router
14
15Package Version
16---------------------------------------------------------
17@angular-devkit/architect 0.1202.2
18@angular-devkit/build-angular 12.2.2
19@angular-devkit/core 12.2.2
20@angular-devkit/schematics 12.2.2
21@angular/cli 12.2.2
22@angular/fire 7.0.0
23@schematics/angular 12.2.2
24rxjs 6.6.7
25typescript 4.3.5
26import { list } from '@angular/fire/database';
27@NgModule({
28 imports: [
29 provideFirebaseApp(() => initializeApp(config)),
30 provideFirestore(() => {
31 const firestore = getFirestore();
32 connectEmulator(firestore, 'localhost', 8080);
33 enableIndexedDbPersistence(firestore);
34 return firestore;
35 }),
36 provideStorage(() => getStorage()),
37 ],
38})
39import { AngularFireModule} from '@angular/fire/compat'
40import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
41QUESTION
Error: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Asked 2022-Apr-01 at 11:28Hello fellow friends I am trying to create my own app but facing issues after updating the react-router-dom to 6.02 I am getting this error
Error: [Home] is not a Route component. All component children of Routes must be a Route or <React.Fragment>
the code is the following
1import { BrowserRouter, Route, Routes } from "react-router-dom";
2import Navbar from "./components/Navbar/Navbar";
3import Home from "./pages/home/Home";
4import Login from "./pages/login/Login";
5import Signup from "./pages/signup/Signup";
6
7function App() {
8 return (
9 <div className="App">
10 <BrowserRouter>
11 <Navbar />
12 <Routes>
13 <Route exact path="/">
14 <Home />
15 </Route>
16 <Route path="/login">
17 <Login />
18 </Route>
19 <Route path="/signup">
20 <Signup />
21 </Route>
22 </Routes>
23 </BrowserRouter>
24 </div>
25 );
26}
27
28export default App;
29ANSWER
Answered 2021-Nov-15 at 14:23<Route path="/" element={<Home />} />
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>
110
Solution
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>
117QUESTION
react router v6 navigate outside of components
Asked 2022-Mar-28 at 11:19In react-router v5 i created history object like this:
1import { createBrowserHistory } from "history";
2export const history = createBrowserHistory();
3And then passed it to the Router:
1import { createBrowserHistory } from "history";
2export const history = createBrowserHistory();
3import { Router, Switch, Route, Link } from "react-router-dom";
4<Router history={history}>
5 ... my routes
6</Router>
7I did it for the opportunity to usage history outside of component:
1import { createBrowserHistory } from "history";
2export const history = createBrowserHistory();
3import { Router, Switch, Route, Link } from "react-router-dom";
4<Router history={history}>
5 ... my routes
6</Router>
7 // store action
8 logout() {
9 this.user = null;
10 history.push('/');
11 }
12This way I moved the logic to the store and the components were kept as clean as possible. But now, in react router v6 i cant do the same. I can still navigate using useNavigate() inside my component, but i cannot create a navigate to use its into my store. Is there any alternative?
ANSWER
Answered 2021-Nov-17 at 07:20Well, it turns out you can duplicate the behavior if you implement a custom router that instantiates the history state in the same manner as RRDv6 routers.
Examine the BrowserRouter implementation for example:
1import { createBrowserHistory } from "history";
2export const history = createBrowserHistory();
3import { Router, Switch, Route, Link } from "react-router-dom";
4<Router history={history}>
5 ... my routes
6</Router>
7 // store action
8 logout() {
9 this.user = null;
10 history.push('/');
11 }
12export function BrowserRouter({
13 basename,
14 children,
15 window
16}: BrowserRouterProps) {
17 let historyRef = React.useRef<BrowserHistory>();
18 if (historyRef.current == null) {
19 historyRef.current = createBrowserHistory({ window });
20 }
21
22 let history = historyRef.current;
23 let [state, setState] = React.useState({
24 action: history.action,
25 location: history.location
26 });
27
28 React.useLayoutEffect(() => history.listen(setState), [history]);
29
30 return (
31 <Router
32 basename={basename}
33 children={children}
34 location={state.location}
35 navigationType={state.action}
36 navigator={history}
37 />
38 );
39}
40Create a CustomRouter that consumes a custom history object and manages the state:
1import { createBrowserHistory } from "history";
2export const history = createBrowserHistory();
3import { Router, Switch, Route, Link } from "react-router-dom";
4<Router history={history}>
5 ... my routes
6</Router>
7 // store action
8 logout() {
9 this.user = null;
10 history.push('/');
11 }
12export function BrowserRouter({
13 basename,
14 children,
15 window
16}: BrowserRouterProps) {
17 let historyRef = React.useRef<BrowserHistory>();
18 if (historyRef.current == null) {
19 historyRef.current = createBrowserHistory({ window });
20 }
21
22 let history = historyRef.current;
23 let [state, setState] = React.useState({
24 action: history.action,
25 location: history.location
26 });
27
28 React.useLayoutEffect(() => history.listen(setState), [history]);
29
30 return (
31 <Router
32 basename={basename}
33 children={children}
34 location={state.location}
35 navigationType={state.action}
36 navigator={history}
37 />
38 );
39}
40const CustomRouter = ({ history, ...props }) => {
41 const [state, setState] = useState({
42 action: history.action,
43 location: history.location
44 });
45
46 useLayoutEffect(() => history.listen(setState), [history]);
47
48 return (
49 <Router
50 {...props}
51 location={state.location}
52 navigationType={state.action}
53 navigator={history}
54 />
55 );
56};
57This effectively proxies the custom history object into the Router and manages the navigation state.
From here you swap in the CustomRouter with custom history object for the existing Router imported from react-router-dom.
1import { createBrowserHistory } from "history";
2export const history = createBrowserHistory();
3import { Router, Switch, Route, Link } from "react-router-dom";
4<Router history={history}>
5 ... my routes
6</Router>
7 // store action
8 logout() {
9 this.user = null;
10 history.push('/');
11 }
12export function BrowserRouter({
13 basename,
14 children,
15 window
16}: BrowserRouterProps) {
17 let historyRef = React.useRef<BrowserHistory>();
18 if (historyRef.current == null) {
19 historyRef.current = createBrowserHistory({ window });
20 }
21
22 let history = historyRef.current;
23 let [state, setState] = React.useState({
24 action: history.action,
25 location: history.location
26 });
27
28 React.useLayoutEffect(() => history.listen(setState), [history]);
29
30 return (
31 <Router
32 basename={basename}
33 children={children}
34 location={state.location}
35 navigationType={state.action}
36 navigator={history}
37 />
38 );
39}
40const CustomRouter = ({ history, ...props }) => {
41 const [state, setState] = useState({
42 action: history.action,
43 location: history.location
44 });
45
46 useLayoutEffect(() => history.listen(setState), [history]);
47
48 return (
49 <Router
50 {...props}
51 location={state.location}
52 navigationType={state.action}
53 navigator={history}
54 />
55 );
56};
57export default function App() {
58 return (
59 <CustomRouter history={history}>
60 <div className="App">
61 <Routes>
62 <Route path="/" element={<Home />} />
63 <Route path="/profile" element={<Profile />} />
64 </Routes>
65 </div>
66 </CustomRouter>
67 );
68}
69Fork of your codesandbox:
QUESTION
The unauthenticated git protocol on port 9418 is no longer supported
Asked 2022-Mar-27 at 13:23I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7Upon investigation, it appears that below section in my yml file is causing the issue.
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9I have looked into this change log but can't seem to comprehend the issue.
Additional Details: Server: EC2 Instance Github actions steps:
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9 steps:
10 - name: Checkout
11 uses: actions/checkout@v2
12
13 - id: vars
14 run: |
15 if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream" ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17 - uses: pCYSl5EDgo/cat@master
18 id: slack
19 with:
20 path: .github/workflows/slack.txt
21
22 - name: Slack Start Notification
23 uses: 8398a7/action-slack@v3
24 env:
25 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26 ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27 COLOR: good
28 STATUS: '`Started`'
29 with:
30 status: custom
31 fields: workflow,job,commit,repo,ref,author,took
32 custom_payload: |
33 ${{ steps.slack.outputs.text }}
34
35 - name: Installing modules
36 env:
37 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38 run: yarn install
39
40 - name: Create Frontend Build
41 env:
42 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43 run: yarn build
44
45 - name: Deploy to Frontend Server DEV
46 if: ${{ contains(github.ref, 'dev') }}
47 uses: easingthemes/ssh-deploy@v2.1.5
48 env:
49 SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50 ARGS: '-rltgoDzvO --delete'
51 SOURCE: 'deploy/'
52 REMOTE_HOST: ${{ secrets.DEV_HOST }}
53 REMOTE_USER: plyfolio-dev
54 TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55package.json file
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9 steps:
10 - name: Checkout
11 uses: actions/checkout@v2
12
13 - id: vars
14 run: |
15 if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream" ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17 - uses: pCYSl5EDgo/cat@master
18 id: slack
19 with:
20 path: .github/workflows/slack.txt
21
22 - name: Slack Start Notification
23 uses: 8398a7/action-slack@v3
24 env:
25 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26 ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27 COLOR: good
28 STATUS: '`Started`'
29 with:
30 status: custom
31 fields: workflow,job,commit,repo,ref,author,took
32 custom_payload: |
33 ${{ steps.slack.outputs.text }}
34
35 - name: Installing modules
36 env:
37 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38 run: yarn install
39
40 - name: Create Frontend Build
41 env:
42 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43 run: yarn build
44
45 - name: Deploy to Frontend Server DEV
46 if: ${{ contains(github.ref, 'dev') }}
47 uses: easingthemes/ssh-deploy@v2.1.5
48 env:
49 SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50 ARGS: '-rltgoDzvO --delete'
51 SOURCE: 'deploy/'
52 REMOTE_HOST: ${{ secrets.DEV_HOST }}
53 REMOTE_USER: plyfolio-dev
54 TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55 {
56 "name": "stackstream-fe",
57 "version": "1.0.0",
58 "authors": [
59 "fayyaznofal@gmail.com"
60 ],
61 "private": true,
62 "dependencies": {
63 "@fortawesome/fontawesome-svg-core": "^1.2.34",
64 "@fortawesome/free-solid-svg-icons": "^5.15.2",
65 "@fortawesome/react-fontawesome": "^0.1.14",
66 "@fullcalendar/bootstrap": "^5.5.0",
67 "@fullcalendar/core": "^5.5.0",
68 "@fullcalendar/daygrid": "^5.5.0",
69 "@fullcalendar/interaction": "^5.5.0",
70 "@fullcalendar/react": "^5.5.0",
71 "@lourenci/react-kanban": "^2.1.0",
72 "@redux-saga/simple-saga-monitor": "^1.1.2",
73 "@testing-library/jest-dom": "^5.11.9",
74 "@testing-library/react": "^11.2.3",
75 "@testing-library/user-event": "^12.6.0",
76 "@toast-ui/react-chart": "^1.0.2",
77 "@types/jest": "^26.0.14",
78 "@types/node": "^14.10.3",
79 "@types/react": "^16.9.49",
80 "@types/react-dom": "^16.9.8",
81 "@vtaits/react-color-picker": "^0.1.1",
82 "apexcharts": "^3.23.1",
83 "availity-reactstrap-validation": "^2.7.0",
84 "axios": "^0.21.1",
85 "axios-mock-adapter": "^1.19.0",
86 "axios-progress-bar": "^1.2.0",
87 "bootstrap": "^5.0.0-beta2",
88 "chart.js": "^2.9.4",
89 "chartist": "^0.11.4",
90 "classnames": "^2.2.6",
91 "components": "^0.1.0",
92 "dotenv": "^8.2.0",
93 "draft-js": "^0.11.7",
94 "echarts": "^4.9.0",
95 "echarts-for-react": "^2.0.16",
96 "firebase": "^8.2.3",
97 "google-maps-react": "^2.0.6",
98 "history": "^4.10.1",
99 "i": "^0.3.6",
100 "i18next": "^19.8.4",
101 "i18next-browser-languagedetector": "^6.0.1",
102 "jsonwebtoken": "^8.5.1",
103 "leaflet": "^1.7.1",
104 "lodash": "^4.17.21",
105 "lodash.clonedeep": "^4.5.0",
106 "lodash.get": "^4.4.2",
107 "metismenujs": "^1.2.1",
108 "mkdirp": "^1.0.4",
109 "moment": "2.29.1",
110 "moment-timezone": "^0.5.32",
111 "nouislider-react": "^3.3.9",
112 "npm": "^7.6.3",
113 "prop-types": "^15.7.2",
114 "query-string": "^6.14.0",
115 "react": "^16.13.1",
116 "react-apexcharts": "^1.3.7",
117 "react-auth-code-input": "^1.0.0",
118 "react-avatar": "^3.10.0",
119 "react-bootstrap": "^1.5.0",
120 "react-bootstrap-editable": "^0.8.2",
121 "react-bootstrap-sweetalert": "^5.2.0",
122 "react-bootstrap-table-next": "^4.0.3",
123 "react-bootstrap-table2-editor": "^1.4.0",
124 "react-bootstrap-table2-paginator": "^2.1.2",
125 "react-bootstrap-table2-toolkit": "^2.1.3",
126 "react-chartist": "^0.14.3",
127 "react-chartjs-2": "^2.11.1",
128 "react-color": "^2.19.3",
129 "react-confirm-alert": "^2.7.0",
130 "react-content-loader": "^6.0.1",
131 "react-countdown": "^2.3.1",
132 "react-countup": "^4.3.3",
133 "react-cropper": "^2.1.4",
134 "react-data-table-component": "^6.11.8",
135 "react-date-picker": "^8.0.6",
136 "react-datepicker": "^3.4.1",
137 "react-dom": "^16.13.1",
138 "react-draft-wysiwyg": "^1.14.5",
139 "react-drag-listview": "^0.1.8",
140 "react-drawer": "^1.3.4",
141 "react-dropzone": "^11.2.4",
142 "react-dual-listbox": "^2.0.0",
143 "react-facebook-login": "^4.1.1",
144 "react-flatpickr": "^3.10.6",
145 "react-google-login": "^5.2.2",
146 "react-hook-form": "^7.15.2",
147 "react-i18next": "^11.8.5",
148 "react-icons": "^4.2.0",
149 "react-image-lightbox": "^5.1.1",
150 "react-input-mask": "^2.0.4",
151 "react-jvectormap": "^0.0.16",
152 "react-leaflet": "^3.0.5",
153 "react-meta-tags": "^1.0.1",
154 "react-modal-video": "^1.2.6",
155 "react-notifications": "^1.7.2",
156 "react-number-format": "^4.7.3",
157 "react-perfect-scrollbar": "^1.5.8",
158 "react-rangeslider": "^2.2.0",
159 "react-rating": "^2.0.5",
160 "react-rating-tooltip": "^1.1.6",
161 "react-redux": "^7.2.1",
162 "react-responsive-carousel": "^3.2.11",
163 "react-router-dom": "^5.2.0",
164 "react-script": "^2.0.5",
165 "react-scripts": "3.4.3",
166 "react-select": "^4.3.1",
167 "react-sparklines": "^1.7.0",
168 "react-star-ratings": "^2.3.0",
169 "react-super-responsive-table": "^5.2.0",
170 "react-switch": "^6.0.0",
171 "react-table": "^7.6.3",
172 "react-toastify": "^7.0.3",
173 "react-toastr": "^3.0.0",
174 "react-twitter-auth": "0.0.13",
175 "reactstrap": "^8.8.1",
176 "recharts": "^2.0.8",
177 "redux": "^4.0.5",
178 "redux-saga": "^1.1.3",
179 "reselect": "^4.0.0",
180 "sass": "^1.37.5",
181 "simplebar-react": "^2.3.0",
182 "styled": "^1.0.0",
183 "styled-components": "^5.2.1",
184 "toastr": "^2.1.4",
185 "typescript": "^4.0.2",
186 "universal-cookie": "^4.0.4"
187 },
188 "devDependencies": {
189 "@typescript-eslint/eslint-plugin": "^2.27.0",
190 "@typescript-eslint/parser": "^2.27.0",
191 "@typescript-eslint/typescript-estree": "^4.15.2",
192 "eslint-config-prettier": "^6.10.1",
193 "eslint-plugin-prettier": "^3.1.2",
194 "husky": "^4.2.5",
195 "lint-staged": "^10.1.3",
196 "prettier": "^1.19.1",
197 "react-test-renderer": "^16.13.1",
198 "redux-devtools-extension": "^2.13.8",
199 "redux-mock-store": "^1.5.4"
200 },
201 "scripts": {
202 "start": "react-scripts start",
203 "build": "react-scripts build && mv build ./deploy/build",
204 "build-local": "react-scripts build",
205 "test": "react-scripts test",
206 "eject": "react-scripts eject"
207 },
208 "eslintConfig": {
209 "extends": "react-app"
210 },
211 "husky": {
212 "hooks": {
213 "pre-commit": "lint-staged"
214 }
215 },
216 "lint-staged": {
217 "*.{js,ts,tsx}": [
218 "eslint --fix"
219 ]
220 },
221 "browserslist": {
222 "production": [
223 ">0.2%",
224 "not dead",
225 "not op_mini all"
226 ],
227 "development": [
228 "last 1 chrome version",
229 "last 1 firefox version",
230 "last 1 safari version"
231 ]
232 }
233}
234ANSWER
Answered 2022-Mar-16 at 07:01First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".
January 11, 2022 Final brownout.
This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.
Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.
As noted by Jörg W Mittag:
There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".
Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.
The permanent shutdown is not until March 15th.
For GitHub Actions:
As in actions/checkout issue 14, you can add as a first step:
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9 steps:
10 - name: Checkout
11 uses: actions/checkout@v2
12
13 - id: vars
14 run: |
15 if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream" ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17 - uses: pCYSl5EDgo/cat@master
18 id: slack
19 with:
20 path: .github/workflows/slack.txt
21
22 - name: Slack Start Notification
23 uses: 8398a7/action-slack@v3
24 env:
25 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26 ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27 COLOR: good
28 STATUS: '`Started`'
29 with:
30 status: custom
31 fields: workflow,job,commit,repo,ref,author,took
32 custom_payload: |
33 ${{ steps.slack.outputs.text }}
34
35 - name: Installing modules
36 env:
37 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38 run: yarn install
39
40 - name: Create Frontend Build
41 env:
42 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43 run: yarn build
44
45 - name: Deploy to Frontend Server DEV
46 if: ${{ contains(github.ref, 'dev') }}
47 uses: easingthemes/ssh-deploy@v2.1.5
48 env:
49 SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50 ARGS: '-rltgoDzvO --delete'
51 SOURCE: 'deploy/'
52 REMOTE_HOST: ${{ secrets.DEV_HOST }}
53 REMOTE_USER: plyfolio-dev
54 TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55 {
56 "name": "stackstream-fe",
57 "version": "1.0.0",
58 "authors": [
59 "fayyaznofal@gmail.com"
60 ],
61 "private": true,
62 "dependencies": {
63 "@fortawesome/fontawesome-svg-core": "^1.2.34",
64 "@fortawesome/free-solid-svg-icons": "^5.15.2",
65 "@fortawesome/react-fontawesome": "^0.1.14",
66 "@fullcalendar/bootstrap": "^5.5.0",
67 "@fullcalendar/core": "^5.5.0",
68 "@fullcalendar/daygrid": "^5.5.0",
69 "@fullcalendar/interaction": "^5.5.0",
70 "@fullcalendar/react": "^5.5.0",
71 "@lourenci/react-kanban": "^2.1.0",
72 "@redux-saga/simple-saga-monitor": "^1.1.2",
73 "@testing-library/jest-dom": "^5.11.9",
74 "@testing-library/react": "^11.2.3",
75 "@testing-library/user-event": "^12.6.0",
76 "@toast-ui/react-chart": "^1.0.2",
77 "@types/jest": "^26.0.14",
78 "@types/node": "^14.10.3",
79 "@types/react": "^16.9.49",
80 "@types/react-dom": "^16.9.8",
81 "@vtaits/react-color-picker": "^0.1.1",
82 "apexcharts": "^3.23.1",
83 "availity-reactstrap-validation": "^2.7.0",
84 "axios": "^0.21.1",
85 "axios-mock-adapter": "^1.19.0",
86 "axios-progress-bar": "^1.2.0",
87 "bootstrap": "^5.0.0-beta2",
88 "chart.js": "^2.9.4",
89 "chartist": "^0.11.4",
90 "classnames": "^2.2.6",
91 "components": "^0.1.0",
92 "dotenv": "^8.2.0",
93 "draft-js": "^0.11.7",
94 "echarts": "^4.9.0",
95 "echarts-for-react": "^2.0.16",
96 "firebase": "^8.2.3",
97 "google-maps-react": "^2.0.6",
98 "history": "^4.10.1",
99 "i": "^0.3.6",
100 "i18next": "^19.8.4",
101 "i18next-browser-languagedetector": "^6.0.1",
102 "jsonwebtoken": "^8.5.1",
103 "leaflet": "^1.7.1",
104 "lodash": "^4.17.21",
105 "lodash.clonedeep": "^4.5.0",
106 "lodash.get": "^4.4.2",
107 "metismenujs": "^1.2.1",
108 "mkdirp": "^1.0.4",
109 "moment": "2.29.1",
110 "moment-timezone": "^0.5.32",
111 "nouislider-react": "^3.3.9",
112 "npm": "^7.6.3",
113 "prop-types": "^15.7.2",
114 "query-string": "^6.14.0",
115 "react": "^16.13.1",
116 "react-apexcharts": "^1.3.7",
117 "react-auth-code-input": "^1.0.0",
118 "react-avatar": "^3.10.0",
119 "react-bootstrap": "^1.5.0",
120 "react-bootstrap-editable": "^0.8.2",
121 "react-bootstrap-sweetalert": "^5.2.0",
122 "react-bootstrap-table-next": "^4.0.3",
123 "react-bootstrap-table2-editor": "^1.4.0",
124 "react-bootstrap-table2-paginator": "^2.1.2",
125 "react-bootstrap-table2-toolkit": "^2.1.3",
126 "react-chartist": "^0.14.3",
127 "react-chartjs-2": "^2.11.1",
128 "react-color": "^2.19.3",
129 "react-confirm-alert": "^2.7.0",
130 "react-content-loader": "^6.0.1",
131 "react-countdown": "^2.3.1",
132 "react-countup": "^4.3.3",
133 "react-cropper": "^2.1.4",
134 "react-data-table-component": "^6.11.8",
135 "react-date-picker": "^8.0.6",
136 "react-datepicker": "^3.4.1",
137 "react-dom": "^16.13.1",
138 "react-draft-wysiwyg": "^1.14.5",
139 "react-drag-listview": "^0.1.8",
140 "react-drawer": "^1.3.4",
141 "react-dropzone": "^11.2.4",
142 "react-dual-listbox": "^2.0.0",
143 "react-facebook-login": "^4.1.1",
144 "react-flatpickr": "^3.10.6",
145 "react-google-login": "^5.2.2",
146 "react-hook-form": "^7.15.2",
147 "react-i18next": "^11.8.5",
148 "react-icons": "^4.2.0",
149 "react-image-lightbox": "^5.1.1",
150 "react-input-mask": "^2.0.4",
151 "react-jvectormap": "^0.0.16",
152 "react-leaflet": "^3.0.5",
153 "react-meta-tags": "^1.0.1",
154 "react-modal-video": "^1.2.6",
155 "react-notifications": "^1.7.2",
156 "react-number-format": "^4.7.3",
157 "react-perfect-scrollbar": "^1.5.8",
158 "react-rangeslider": "^2.2.0",
159 "react-rating": "^2.0.5",
160 "react-rating-tooltip": "^1.1.6",
161 "react-redux": "^7.2.1",
162 "react-responsive-carousel": "^3.2.11",
163 "react-router-dom": "^5.2.0",
164 "react-script": "^2.0.5",
165 "react-scripts": "3.4.3",
166 "react-select": "^4.3.1",
167 "react-sparklines": "^1.7.0",
168 "react-star-ratings": "^2.3.0",
169 "react-super-responsive-table": "^5.2.0",
170 "react-switch": "^6.0.0",
171 "react-table": "^7.6.3",
172 "react-toastify": "^7.0.3",
173 "react-toastr": "^3.0.0",
174 "react-twitter-auth": "0.0.13",
175 "reactstrap": "^8.8.1",
176 "recharts": "^2.0.8",
177 "redux": "^4.0.5",
178 "redux-saga": "^1.1.3",
179 "reselect": "^4.0.0",
180 "sass": "^1.37.5",
181 "simplebar-react": "^2.3.0",
182 "styled": "^1.0.0",
183 "styled-components": "^5.2.1",
184 "toastr": "^2.1.4",
185 "typescript": "^4.0.2",
186 "universal-cookie": "^4.0.4"
187 },
188 "devDependencies": {
189 "@typescript-eslint/eslint-plugin": "^2.27.0",
190 "@typescript-eslint/parser": "^2.27.0",
191 "@typescript-eslint/typescript-estree": "^4.15.2",
192 "eslint-config-prettier": "^6.10.1",
193 "eslint-plugin-prettier": "^3.1.2",
194 "husky": "^4.2.5",
195 "lint-staged": "^10.1.3",
196 "prettier": "^1.19.1",
197 "react-test-renderer": "^16.13.1",
198 "redux-devtools-extension": "^2.13.8",
199 "redux-mock-store": "^1.5.4"
200 },
201 "scripts": {
202 "start": "react-scripts start",
203 "build": "react-scripts build && mv build ./deploy/build",
204 "build-local": "react-scripts build",
205 "test": "react-scripts test",
206 "eject": "react-scripts eject"
207 },
208 "eslintConfig": {
209 "extends": "react-app"
210 },
211 "husky": {
212 "hooks": {
213 "pre-commit": "lint-staged"
214 }
215 },
216 "lint-staged": {
217 "*.{js,ts,tsx}": [
218 "eslint --fix"
219 ]
220 },
221 "browserslist": {
222 "production": [
223 ">0.2%",
224 "not dead",
225 "not op_mini all"
226 ],
227 "development": [
228 "last 1 chrome version",
229 "last 1 firefox version",
230 "last 1 safari version"
231 ]
232 }
233}
234 - name: Fix up git URLs
235 run: echo -e '[url "https://github.com/"]\n insteadOf = "git://github.com/"' >> ~/.gitconfig
236That will change any git://github.com/ into https://github.com/.
For all your repositories, you can set:
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9 steps:
10 - name: Checkout
11 uses: actions/checkout@v2
12
13 - id: vars
14 run: |
15 if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream" ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17 - uses: pCYSl5EDgo/cat@master
18 id: slack
19 with:
20 path: .github/workflows/slack.txt
21
22 - name: Slack Start Notification
23 uses: 8398a7/action-slack@v3
24 env:
25 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26 ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27 COLOR: good
28 STATUS: '`Started`'
29 with:
30 status: custom
31 fields: workflow,job,commit,repo,ref,author,took
32 custom_payload: |
33 ${{ steps.slack.outputs.text }}
34
35 - name: Installing modules
36 env:
37 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38 run: yarn install
39
40 - name: Create Frontend Build
41 env:
42 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43 run: yarn build
44
45 - name: Deploy to Frontend Server DEV
46 if: ${{ contains(github.ref, 'dev') }}
47 uses: easingthemes/ssh-deploy@v2.1.5
48 env:
49 SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50 ARGS: '-rltgoDzvO --delete'
51 SOURCE: 'deploy/'
52 REMOTE_HOST: ${{ secrets.DEV_HOST }}
53 REMOTE_USER: plyfolio-dev
54 TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55 {
56 "name": "stackstream-fe",
57 "version": "1.0.0",
58 "authors": [
59 "fayyaznofal@gmail.com"
60 ],
61 "private": true,
62 "dependencies": {
63 "@fortawesome/fontawesome-svg-core": "^1.2.34",
64 "@fortawesome/free-solid-svg-icons": "^5.15.2",
65 "@fortawesome/react-fontawesome": "^0.1.14",
66 "@fullcalendar/bootstrap": "^5.5.0",
67 "@fullcalendar/core": "^5.5.0",
68 "@fullcalendar/daygrid": "^5.5.0",
69 "@fullcalendar/interaction": "^5.5.0",
70 "@fullcalendar/react": "^5.5.0",
71 "@lourenci/react-kanban": "^2.1.0",
72 "@redux-saga/simple-saga-monitor": "^1.1.2",
73 "@testing-library/jest-dom": "^5.11.9",
74 "@testing-library/react": "^11.2.3",
75 "@testing-library/user-event": "^12.6.0",
76 "@toast-ui/react-chart": "^1.0.2",
77 "@types/jest": "^26.0.14",
78 "@types/node": "^14.10.3",
79 "@types/react": "^16.9.49",
80 "@types/react-dom": "^16.9.8",
81 "@vtaits/react-color-picker": "^0.1.1",
82 "apexcharts": "^3.23.1",
83 "availity-reactstrap-validation": "^2.7.0",
84 "axios": "^0.21.1",
85 "axios-mock-adapter": "^1.19.0",
86 "axios-progress-bar": "^1.2.0",
87 "bootstrap": "^5.0.0-beta2",
88 "chart.js": "^2.9.4",
89 "chartist": "^0.11.4",
90 "classnames": "^2.2.6",
91 "components": "^0.1.0",
92 "dotenv": "^8.2.0",
93 "draft-js": "^0.11.7",
94 "echarts": "^4.9.0",
95 "echarts-for-react": "^2.0.16",
96 "firebase": "^8.2.3",
97 "google-maps-react": "^2.0.6",
98 "history": "^4.10.1",
99 "i": "^0.3.6",
100 "i18next": "^19.8.4",
101 "i18next-browser-languagedetector": "^6.0.1",
102 "jsonwebtoken": "^8.5.1",
103 "leaflet": "^1.7.1",
104 "lodash": "^4.17.21",
105 "lodash.clonedeep": "^4.5.0",
106 "lodash.get": "^4.4.2",
107 "metismenujs": "^1.2.1",
108 "mkdirp": "^1.0.4",
109 "moment": "2.29.1",
110 "moment-timezone": "^0.5.32",
111 "nouislider-react": "^3.3.9",
112 "npm": "^7.6.3",
113 "prop-types": "^15.7.2",
114 "query-string": "^6.14.0",
115 "react": "^16.13.1",
116 "react-apexcharts": "^1.3.7",
117 "react-auth-code-input": "^1.0.0",
118 "react-avatar": "^3.10.0",
119 "react-bootstrap": "^1.5.0",
120 "react-bootstrap-editable": "^0.8.2",
121 "react-bootstrap-sweetalert": "^5.2.0",
122 "react-bootstrap-table-next": "^4.0.3",
123 "react-bootstrap-table2-editor": "^1.4.0",
124 "react-bootstrap-table2-paginator": "^2.1.2",
125 "react-bootstrap-table2-toolkit": "^2.1.3",
126 "react-chartist": "^0.14.3",
127 "react-chartjs-2": "^2.11.1",
128 "react-color": "^2.19.3",
129 "react-confirm-alert": "^2.7.0",
130 "react-content-loader": "^6.0.1",
131 "react-countdown": "^2.3.1",
132 "react-countup": "^4.3.3",
133 "react-cropper": "^2.1.4",
134 "react-data-table-component": "^6.11.8",
135 "react-date-picker": "^8.0.6",
136 "react-datepicker": "^3.4.1",
137 "react-dom": "^16.13.1",
138 "react-draft-wysiwyg": "^1.14.5",
139 "react-drag-listview": "^0.1.8",
140 "react-drawer": "^1.3.4",
141 "react-dropzone": "^11.2.4",
142 "react-dual-listbox": "^2.0.0",
143 "react-facebook-login": "^4.1.1",
144 "react-flatpickr": "^3.10.6",
145 "react-google-login": "^5.2.2",
146 "react-hook-form": "^7.15.2",
147 "react-i18next": "^11.8.5",
148 "react-icons": "^4.2.0",
149 "react-image-lightbox": "^5.1.1",
150 "react-input-mask": "^2.0.4",
151 "react-jvectormap": "^0.0.16",
152 "react-leaflet": "^3.0.5",
153 "react-meta-tags": "^1.0.1",
154 "react-modal-video": "^1.2.6",
155 "react-notifications": "^1.7.2",
156 "react-number-format": "^4.7.3",
157 "react-perfect-scrollbar": "^1.5.8",
158 "react-rangeslider": "^2.2.0",
159 "react-rating": "^2.0.5",
160 "react-rating-tooltip": "^1.1.6",
161 "react-redux": "^7.2.1",
162 "react-responsive-carousel": "^3.2.11",
163 "react-router-dom": "^5.2.0",
164 "react-script": "^2.0.5",
165 "react-scripts": "3.4.3",
166 "react-select": "^4.3.1",
167 "react-sparklines": "^1.7.0",
168 "react-star-ratings": "^2.3.0",
169 "react-super-responsive-table": "^5.2.0",
170 "react-switch": "^6.0.0",
171 "react-table": "^7.6.3",
172 "react-toastify": "^7.0.3",
173 "react-toastr": "^3.0.0",
174 "react-twitter-auth": "0.0.13",
175 "reactstrap": "^8.8.1",
176 "recharts": "^2.0.8",
177 "redux": "^4.0.5",
178 "redux-saga": "^1.1.3",
179 "reselect": "^4.0.0",
180 "sass": "^1.37.5",
181 "simplebar-react": "^2.3.0",
182 "styled": "^1.0.0",
183 "styled-components": "^5.2.1",
184 "toastr": "^2.1.4",
185 "typescript": "^4.0.2",
186 "universal-cookie": "^4.0.4"
187 },
188 "devDependencies": {
189 "@typescript-eslint/eslint-plugin": "^2.27.0",
190 "@typescript-eslint/parser": "^2.27.0",
191 "@typescript-eslint/typescript-estree": "^4.15.2",
192 "eslint-config-prettier": "^6.10.1",
193 "eslint-plugin-prettier": "^3.1.2",
194 "husky": "^4.2.5",
195 "lint-staged": "^10.1.3",
196 "prettier": "^1.19.1",
197 "react-test-renderer": "^16.13.1",
198 "redux-devtools-extension": "^2.13.8",
199 "redux-mock-store": "^1.5.4"
200 },
201 "scripts": {
202 "start": "react-scripts start",
203 "build": "react-scripts build && mv build ./deploy/build",
204 "build-local": "react-scripts build",
205 "test": "react-scripts test",
206 "eject": "react-scripts eject"
207 },
208 "eslintConfig": {
209 "extends": "react-app"
210 },
211 "husky": {
212 "hooks": {
213 "pre-commit": "lint-staged"
214 }
215 },
216 "lint-staged": {
217 "*.{js,ts,tsx}": [
218 "eslint --fix"
219 ]
220 },
221 "browserslist": {
222 "production": [
223 ">0.2%",
224 "not dead",
225 "not op_mini all"
226 ],
227 "development": [
228 "last 1 chrome version",
229 "last 1 firefox version",
230 "last 1 safari version"
231 ]
232 }
233}
234 - name: Fix up git URLs
235 run: echo -e '[url "https://github.com/"]\n insteadOf = "git://github.com/"' >> ~/.gitconfig
236git config --global url."https://github.com/".insteadOf git://github.com/
237You can also use SSH, but GitHub Security reminds us that, as of March 15th, 2022, GitHub stopped accepting DSA keys. RSA keys uploaded after Nov 2, 2021 will work only with SHA-2 signatures.
The deprecated MACs, ciphers, and unencrypted Git protocol are permanently disabled.
So this (with the right key) would work:
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9 steps:
10 - name: Checkout
11 uses: actions/checkout@v2
12
13 - id: vars
14 run: |
15 if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream" ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17 - uses: pCYSl5EDgo/cat@master
18 id: slack
19 with:
20 path: .github/workflows/slack.txt
21
22 - name: Slack Start Notification
23 uses: 8398a7/action-slack@v3
24 env:
25 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26 ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27 COLOR: good
28 STATUS: '`Started`'
29 with:
30 status: custom
31 fields: workflow,job,commit,repo,ref,author,took
32 custom_payload: |
33 ${{ steps.slack.outputs.text }}
34
35 - name: Installing modules
36 env:
37 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38 run: yarn install
39
40 - name: Create Frontend Build
41 env:
42 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43 run: yarn build
44
45 - name: Deploy to Frontend Server DEV
46 if: ${{ contains(github.ref, 'dev') }}
47 uses: easingthemes/ssh-deploy@v2.1.5
48 env:
49 SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50 ARGS: '-rltgoDzvO --delete'
51 SOURCE: 'deploy/'
52 REMOTE_HOST: ${{ secrets.DEV_HOST }}
53 REMOTE_USER: plyfolio-dev
54 TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55 {
56 "name": "stackstream-fe",
57 "version": "1.0.0",
58 "authors": [
59 "fayyaznofal@gmail.com"
60 ],
61 "private": true,
62 "dependencies": {
63 "@fortawesome/fontawesome-svg-core": "^1.2.34",
64 "@fortawesome/free-solid-svg-icons": "^5.15.2",
65 "@fortawesome/react-fontawesome": "^0.1.14",
66 "@fullcalendar/bootstrap": "^5.5.0",
67 "@fullcalendar/core": "^5.5.0",
68 "@fullcalendar/daygrid": "^5.5.0",
69 "@fullcalendar/interaction": "^5.5.0",
70 "@fullcalendar/react": "^5.5.0",
71 "@lourenci/react-kanban": "^2.1.0",
72 "@redux-saga/simple-saga-monitor": "^1.1.2",
73 "@testing-library/jest-dom": "^5.11.9",
74 "@testing-library/react": "^11.2.3",
75 "@testing-library/user-event": "^12.6.0",
76 "@toast-ui/react-chart": "^1.0.2",
77 "@types/jest": "^26.0.14",
78 "@types/node": "^14.10.3",
79 "@types/react": "^16.9.49",
80 "@types/react-dom": "^16.9.8",
81 "@vtaits/react-color-picker": "^0.1.1",
82 "apexcharts": "^3.23.1",
83 "availity-reactstrap-validation": "^2.7.0",
84 "axios": "^0.21.1",
85 "axios-mock-adapter": "^1.19.0",
86 "axios-progress-bar": "^1.2.0",
87 "bootstrap": "^5.0.0-beta2",
88 "chart.js": "^2.9.4",
89 "chartist": "^0.11.4",
90 "classnames": "^2.2.6",
91 "components": "^0.1.0",
92 "dotenv": "^8.2.0",
93 "draft-js": "^0.11.7",
94 "echarts": "^4.9.0",
95 "echarts-for-react": "^2.0.16",
96 "firebase": "^8.2.3",
97 "google-maps-react": "^2.0.6",
98 "history": "^4.10.1",
99 "i": "^0.3.6",
100 "i18next": "^19.8.4",
101 "i18next-browser-languagedetector": "^6.0.1",
102 "jsonwebtoken": "^8.5.1",
103 "leaflet": "^1.7.1",
104 "lodash": "^4.17.21",
105 "lodash.clonedeep": "^4.5.0",
106 "lodash.get": "^4.4.2",
107 "metismenujs": "^1.2.1",
108 "mkdirp": "^1.0.4",
109 "moment": "2.29.1",
110 "moment-timezone": "^0.5.32",
111 "nouislider-react": "^3.3.9",
112 "npm": "^7.6.3",
113 "prop-types": "^15.7.2",
114 "query-string": "^6.14.0",
115 "react": "^16.13.1",
116 "react-apexcharts": "^1.3.7",
117 "react-auth-code-input": "^1.0.0",
118 "react-avatar": "^3.10.0",
119 "react-bootstrap": "^1.5.0",
120 "react-bootstrap-editable": "^0.8.2",
121 "react-bootstrap-sweetalert": "^5.2.0",
122 "react-bootstrap-table-next": "^4.0.3",
123 "react-bootstrap-table2-editor": "^1.4.0",
124 "react-bootstrap-table2-paginator": "^2.1.2",
125 "react-bootstrap-table2-toolkit": "^2.1.3",
126 "react-chartist": "^0.14.3",
127 "react-chartjs-2": "^2.11.1",
128 "react-color": "^2.19.3",
129 "react-confirm-alert": "^2.7.0",
130 "react-content-loader": "^6.0.1",
131 "react-countdown": "^2.3.1",
132 "react-countup": "^4.3.3",
133 "react-cropper": "^2.1.4",
134 "react-data-table-component": "^6.11.8",
135 "react-date-picker": "^8.0.6",
136 "react-datepicker": "^3.4.1",
137 "react-dom": "^16.13.1",
138 "react-draft-wysiwyg": "^1.14.5",
139 "react-drag-listview": "^0.1.8",
140 "react-drawer": "^1.3.4",
141 "react-dropzone": "^11.2.4",
142 "react-dual-listbox": "^2.0.0",
143 "react-facebook-login": "^4.1.1",
144 "react-flatpickr": "^3.10.6",
145 "react-google-login": "^5.2.2",
146 "react-hook-form": "^7.15.2",
147 "react-i18next": "^11.8.5",
148 "react-icons": "^4.2.0",
149 "react-image-lightbox": "^5.1.1",
150 "react-input-mask": "^2.0.4",
151 "react-jvectormap": "^0.0.16",
152 "react-leaflet": "^3.0.5",
153 "react-meta-tags": "^1.0.1",
154 "react-modal-video": "^1.2.6",
155 "react-notifications": "^1.7.2",
156 "react-number-format": "^4.7.3",
157 "react-perfect-scrollbar": "^1.5.8",
158 "react-rangeslider": "^2.2.0",
159 "react-rating": "^2.0.5",
160 "react-rating-tooltip": "^1.1.6",
161 "react-redux": "^7.2.1",
162 "react-responsive-carousel": "^3.2.11",
163 "react-router-dom": "^5.2.0",
164 "react-script": "^2.0.5",
165 "react-scripts": "3.4.3",
166 "react-select": "^4.3.1",
167 "react-sparklines": "^1.7.0",
168 "react-star-ratings": "^2.3.0",
169 "react-super-responsive-table": "^5.2.0",
170 "react-switch": "^6.0.0",
171 "react-table": "^7.6.3",
172 "react-toastify": "^7.0.3",
173 "react-toastr": "^3.0.0",
174 "react-twitter-auth": "0.0.13",
175 "reactstrap": "^8.8.1",
176 "recharts": "^2.0.8",
177 "redux": "^4.0.5",
178 "redux-saga": "^1.1.3",
179 "reselect": "^4.0.0",
180 "sass": "^1.37.5",
181 "simplebar-react": "^2.3.0",
182 "styled": "^1.0.0",
183 "styled-components": "^5.2.1",
184 "toastr": "^2.1.4",
185 "typescript": "^4.0.2",
186 "universal-cookie": "^4.0.4"
187 },
188 "devDependencies": {
189 "@typescript-eslint/eslint-plugin": "^2.27.0",
190 "@typescript-eslint/parser": "^2.27.0",
191 "@typescript-eslint/typescript-estree": "^4.15.2",
192 "eslint-config-prettier": "^6.10.1",
193 "eslint-plugin-prettier": "^3.1.2",
194 "husky": "^4.2.5",
195 "lint-staged": "^10.1.3",
196 "prettier": "^1.19.1",
197 "react-test-renderer": "^16.13.1",
198 "redux-devtools-extension": "^2.13.8",
199 "redux-mock-store": "^1.5.4"
200 },
201 "scripts": {
202 "start": "react-scripts start",
203 "build": "react-scripts build && mv build ./deploy/build",
204 "build-local": "react-scripts build",
205 "test": "react-scripts test",
206 "eject": "react-scripts eject"
207 },
208 "eslintConfig": {
209 "extends": "react-app"
210 },
211 "husky": {
212 "hooks": {
213 "pre-commit": "lint-staged"
214 }
215 },
216 "lint-staged": {
217 "*.{js,ts,tsx}": [
218 "eslint --fix"
219 ]
220 },
221 "browserslist": {
222 "production": [
223 ">0.2%",
224 "not dead",
225 "not op_mini all"
226 ],
227 "development": [
228 "last 1 chrome version",
229 "last 1 firefox version",
230 "last 1 safari version"
231 ]
232 }
233}
234 - name: Fix up git URLs
235 run: echo -e '[url "https://github.com/"]\n insteadOf = "git://github.com/"' >> ~/.gitconfig
236git config --global url."https://github.com/".insteadOf git://github.com/
237git config --global url."git@github.com:".insteadOf git://github.com/
238That will change any git://github.com/ (unencrypted Git protocol) into git@github.com: (SSH URL).
QUESTION
What is the alternative for Redirect in react-router-dom v 6.0.0?
Asked 2022-Mar-25 at 17:49New version of react-router-dom (v6.0.0) doesn't identify "Redirect". What is the alternative for it?
ANSWER
Answered 2021-Nov-14 at 09:17Here is what the react-router-dom teams said on the matter of redirects when that removed that API in v6: https://github.com/remix-run/react-router/blob/main/docs/upgrading/reach.md#redirect-redirectto-isredirect
QUESTION
How to redirect in React Router v6?
Asked 2022-Mar-24 at 17:22I am trying to upgrade to React Router v6 (react-router-dom 6.0.1).
Here is my updated code:
1import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
2
3<BrowserRouter>
4 <Routes>
5 <Route path="/" element={<Home />} />
6 <Route path="/lab" element={<Lab />} />
7 <Route render={() => <Navigate to="/" />} />
8 </Routes>
9</BrowserRouter>
10The last Route is redirecting the rest of paths to /.
However, I got an error
TS2322: Type '{ render: () => Element; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'. Property 'render' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.
However, based on the doc, it does have render for Route. How to use it correctly?
ANSWER
Answered 2022-Mar-18 at 18:41I think you should use the no match route approach.
Check this in the documentation.
https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-no-match-route
1import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
2
3<BrowserRouter>
4 <Routes>
5 <Route path="/" element={<Home />} />
6 <Route path="/lab" element={<Lab />} />
7 <Route render={() => <Navigate to="/" />} />
8 </Routes>
9</BrowserRouter>
10import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
11
12<BrowserRouter>
13 <Routes>
14 <Route path="/" element={<Home />} />
15 <Route path="/lab" element={<Lab />} />
16 <Route
17 path="*"
18 element={<Navigate to="/" replace />}
19 />
20 </Routes>
21</BrowserRouter>
22
Update - 18/03/2022
To keep the history clean, you should set replace prop. This will avoid extra redirects after the user click back. Thanks @Paul for this tip.
QUESTION
Error: [PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Asked 2022-Mar-24 at 16:08I'm using React Router v6 and am creating private routes for my application.
In file PrivateRoute.js, I've the code
1import React from 'react';
2import {Route,Navigate} from "react-router-dom";
3import {isauth} from 'auth'
4
5function PrivateRoute({ element, path }) {
6 const authed = isauth() // isauth() returns true or false based on localStorage
7 const ele = authed === true ? element : <Navigate to="/Home" />;
8 return <Route path={path} element={ele} />;
9}
10
11export default PrivateRoute
12And in file route.js I've written as:
1import React from 'react';
2import {Route,Navigate} from "react-router-dom";
3import {isauth} from 'auth'
4
5function PrivateRoute({ element, path }) {
6 const authed = isauth() // isauth() returns true or false based on localStorage
7 const ele = authed === true ? element : <Navigate to="/Home" />;
8 return <Route path={path} element={ele} />;
9}
10
11export default PrivateRoute
12 ...
13<PrivateRoute exact path="/" element={<Dashboard/>}/>
14<Route exact path="/home" element={<Home/>}/>
15I've gone through the same example React-router Auth Example - StackBlitz, file App.tsx
Is there something I'm missing?
ANSWER
Answered 2021-Nov-12 at 21:20I ran into the same issue today and came up with the following solution based on this very helpful article by Andrew Luca
In PrivateRoute.js:
1import React from 'react';
2import {Route,Navigate} from "react-router-dom";
3import {isauth} from 'auth'
4
5function PrivateRoute({ element, path }) {
6 const authed = isauth() // isauth() returns true or false based on localStorage
7 const ele = authed === true ? element : <Navigate to="/Home" />;
8 return <Route path={path} element={ele} />;
9}
10
11export default PrivateRoute
12 ...
13<PrivateRoute exact path="/" element={<Dashboard/>}/>
14<Route exact path="/home" element={<Home/>}/>
15import React from 'react';
16import { Navigate, Outlet } from 'react-router-dom';
17
18const PrivateRoute = () => {
19 const auth = null; // determine if authorized, from context or however you're doing it
20
21 // If authorized, return an outlet that will render child elements
22 // If not, return element that will navigate to login page
23 return auth ? <Outlet /> : <Navigate to="/login" />;
24}
25In App.js (I've left in some other pages as examples):
1import React from 'react';
2import {Route,Navigate} from "react-router-dom";
3import {isauth} from 'auth'
4
5function PrivateRoute({ element, path }) {
6 const authed = isauth() // isauth() returns true or false based on localStorage
7 const ele = authed === true ? element : <Navigate to="/Home" />;
8 return <Route path={path} element={ele} />;
9}
10
11export default PrivateRoute
12 ...
13<PrivateRoute exact path="/" element={<Dashboard/>}/>
14<Route exact path="/home" element={<Home/>}/>
15import React from 'react';
16import { Navigate, Outlet } from 'react-router-dom';
17
18const PrivateRoute = () => {
19 const auth = null; // determine if authorized, from context or however you're doing it
20
21 // If authorized, return an outlet that will render child elements
22 // If not, return element that will navigate to login page
23 return auth ? <Outlet /> : <Navigate to="/login" />;
24}
25import './App.css';
26import React, {Fragment} from 'react';
27import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
28import Navbar from './components/layout/Navbar';
29import Home from './components/pages/Home';
30import Register from './components/auth/Register'
31import Login from './components/auth/Login';
32import PrivateRoute from './components/routing/PrivateRoute';
33
34const App = () => {
35 return (
36 <Router>
37 <Fragment>
38 <Navbar/>
39 <Routes>
40 <Route exact path='/' element={<PrivateRoute/>}>
41 <Route exact path='/' element={<Home/>}/>
42 </Route>
43 <Route exact path='/register' element={<Register/>}/>
44 <Route exact path='/login' element={<Login/>}/>
45 </Routes>
46 </Fragment>
47 </Router>
48
49 );
50}
51In the above routing, this is the private route:
1import React from 'react';
2import {Route,Navigate} from "react-router-dom";
3import {isauth} from 'auth'
4
5function PrivateRoute({ element, path }) {
6 const authed = isauth() // isauth() returns true or false based on localStorage
7 const ele = authed === true ? element : <Navigate to="/Home" />;
8 return <Route path={path} element={ele} />;
9}
10
11export default PrivateRoute
12 ...
13<PrivateRoute exact path="/" element={<Dashboard/>}/>
14<Route exact path="/home" element={<Home/>}/>
15import React from 'react';
16import { Navigate, Outlet } from 'react-router-dom';
17
18const PrivateRoute = () => {
19 const auth = null; // determine if authorized, from context or however you're doing it
20
21 // If authorized, return an outlet that will render child elements
22 // If not, return element that will navigate to login page
23 return auth ? <Outlet /> : <Navigate to="/login" />;
24}
25import './App.css';
26import React, {Fragment} from 'react';
27import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
28import Navbar from './components/layout/Navbar';
29import Home from './components/pages/Home';
30import Register from './components/auth/Register'
31import Login from './components/auth/Login';
32import PrivateRoute from './components/routing/PrivateRoute';
33
34const App = () => {
35 return (
36 <Router>
37 <Fragment>
38 <Navbar/>
39 <Routes>
40 <Route exact path='/' element={<PrivateRoute/>}>
41 <Route exact path='/' element={<Home/>}/>
42 </Route>
43 <Route exact path='/register' element={<Register/>}/>
44 <Route exact path='/login' element={<Login/>}/>
45 </Routes>
46 </Fragment>
47 </Router>
48
49 );
50}
51<Route exact path='/' element={<PrivateRoute/>}>
52 <Route exact path='/' element={<Home/>}/>
53</Route>
54If authorization is successful, the element will show. Otherwise, it will navigate to the login page.
Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Router
Tutorials and Learning Resources are not available at this moment for Router
Share this Page
Get latest updates on Router