Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 061bb14

Browse files
committed
new examples
1 parent 48b89a0 commit 061bb14

File tree

3 files changed

+211
-1
lines changed

3 files changed

+211
-1
lines changed

‎src/App.Authentication.jsx

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import * as React from 'react';
2+
import {
3+
Routes,
4+
Route,
5+
NavLink,
6+
Navigate,
7+
useNavigate,
8+
useLocation,
9+
} from 'react-router-dom';
10+
11+
const fakeAuth = () =>
12+
new Promise((resolve) => {
13+
setTimeout(() => resolve('2342f2f1d131rf12'), 250);
14+
});
15+
16+
const AuthContext = React.createContext(null);
17+
18+
const AuthProvider = ({ children }) => {
19+
const navigate = useNavigate();
20+
const location = useLocation();
21+
22+
const [token, setToken] = React.useState(null);
23+
24+
const handleLogin = async () => {
25+
const token = await fakeAuth();
26+
27+
setToken(token);
28+
29+
const origin = location.state?.from?.pathname || '/dashboard';
30+
navigate(origin);
31+
};
32+
33+
const handleLogout = () => {
34+
setToken(null);
35+
};
36+
37+
const value = {
38+
token,
39+
onLogin: handleLogin,
40+
onLogout: handleLogout,
41+
};
42+
43+
return (
44+
<AuthContext.Provider value={value}>
45+
{children}
46+
</AuthContext.Provider>
47+
);
48+
};
49+
50+
const useAuth = () => {
51+
return React.useContext(AuthContext);
52+
};
53+
54+
const ProtectedRoute = ({ children }) => {
55+
const { token } = useAuth();
56+
const location = useLocation();
57+
58+
if (!token) {
59+
return <Navigate to="/home" replace state={{ from: location }} />;
60+
}
61+
62+
return children;
63+
};
64+
65+
const App = () => {
66+
return (
67+
<AuthProvider>
68+
<h1>React Router</h1>
69+
70+
<Navigation />
71+
72+
<Routes>
73+
<Route index element={<Home />} />
74+
<Route path="home" element={<Home />} />
75+
<Route
76+
path="dashboard"
77+
element={
78+
<ProtectedRoute>
79+
<Dashboard />
80+
</ProtectedRoute>
81+
}
82+
/>
83+
<Route
84+
path="admin"
85+
element={
86+
<ProtectedRoute>
87+
<Admin />
88+
</ProtectedRoute>
89+
}
90+
/>
91+
92+
<Route path="*" element={<NoMatch />} />
93+
</Routes>
94+
</AuthProvider>
95+
);
96+
};
97+
98+
const Navigation = () => {
99+
const { token, onLogout } = useAuth();
100+
101+
return (
102+
<nav>
103+
<NavLink to="/home">Home</NavLink>
104+
<NavLink to="/dashboard">Dashboard</NavLink>
105+
<NavLink to="/admin">Admin</NavLink>
106+
107+
{token && (
108+
<button type="button" onClick={onLogout}>
109+
Sign Out
110+
</button>
111+
)}
112+
</nav>
113+
);
114+
};
115+
116+
const Home = () => {
117+
const { onLogin } = useAuth();
118+
119+
return (
120+
<>
121+
<h2>Home (Public)</h2>
122+
123+
<button type="button" onClick={onLogin}>
124+
Sign In
125+
</button>
126+
</>
127+
);
128+
};
129+
130+
const Dashboard = () => {
131+
const { token } = useAuth();
132+
133+
return (
134+
<>
135+
<h2>Dashboard (Protected)</h2>
136+
137+
<div>Authenticated as {token}</div>
138+
</>
139+
);
140+
};
141+
142+
const Admin = () => {
143+
return (
144+
<>
145+
<h2>Admin (Protected)</h2>
146+
</>
147+
);
148+
};
149+
150+
const NoMatch = () => {
151+
return <p>There's nothing here: 404!</p>;
152+
};
153+
154+
export default App;

‎src/App.Redirect.jsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import * as React from 'react';
2+
import { Routes, Route, Link, useNavigate } from 'react-router-dom';
3+
4+
const App = () => {
5+
return (
6+
<>
7+
<h1>React Router</h1>
8+
9+
<nav>
10+
<Link to="/home">Home</Link>
11+
<Link to="/about">About</Link>
12+
</nav>
13+
14+
<Routes>
15+
<Route index element={<Home />} />
16+
<Route path="home" element={<Home />} />
17+
<Route path="about" element={<About />} />
18+
<Route path="*" element={<NoMatch />} />
19+
</Routes>
20+
</>
21+
);
22+
};
23+
24+
const Home = () => {
25+
return (
26+
<>
27+
<h2>Home</h2>
28+
</>
29+
);
30+
};
31+
32+
const About = () => {
33+
const shouldRedirect = true;
34+
35+
const navigate = useNavigate();
36+
37+
React.useEffect(() => {
38+
if (shouldRedirect) {
39+
navigate('/home');
40+
}
41+
});
42+
43+
return (
44+
<>
45+
<h2>About</h2>
46+
</>
47+
);
48+
};
49+
50+
const NoMatch = () => {
51+
return <p>There's nothing here: 404!</p>;
52+
};
53+
54+
export default App;

‎src/main.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import {
77
} from 'react-router-dom';
88
import { QueryParamProvider } from 'use-query-params';
99

10-
import App from './App.jsx';
10+
// import App from './App.jsx';
11+
// import App from './App.Redirect.jsx';
12+
import App from './App.Authentication.jsx';
1113
// import App from './App.Nested.jsx';
1214
// import App from './App.Descendant.jsx';
1315
// import App from './App.QueryParams.jsx';

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /