teratail
回答率
85.47%
質問するログイン新規登録
トップReact.jsに関する質問Reactで、BrowserRouter was not found in 'react-router' 　と表示される

編集履歴

質問編集履歴

2

コードの修正

2022/03/28 01:27

投稿

takoyan
takoyan

スコア105

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
  分かる方がいればよろしくお願いします。
13
13
 
14
14
  ```JavaScript
15
- #src/templates/Signup.js
15
+ #Router.jsx
16
16
 
17
17
  import React from "react";
18
18
  import { Route, BrowserRouter } from "react-router";
@@ -56,23 +56,6 @@
56
56
 
57
57
  ```
58
58
 
59
- ```JavaScript
60
- #Router.jsx
61
- import React from "react";
62
- import { Routes, Route } from "react-router";
63
- import { SignUp } from "./templates";
64
-
65
- const Router = () => {
66
- return (
67
- <Routes>
68
- <Route exact path="/signup" component={SignUp} />
69
- </Routes>
70
- );
71
- };
72
-
73
- export default Router;
74
-
75
- ```
76
59
 
77
60
  ```ここに言語を入力
78
61
  #package.json
React.js

1

コードの変更

2022/03/28 01:26

投稿

takoyan
takoyan

スコア105

test CHANGED
@@ -1 +1 @@
1
- ReactでRouterが表示されない
1
+ Reactで、BrowserRouter was not found in 'react-router' 　と表示される
test CHANGED
@@ -1,150 +1,43 @@
1
- 本番環境　https://ec-app-9608a.web.app/signup
2
- Github https://github.com/takoyan33/react-ec-app
3
-
4
- 現在　この動画　https://www.youtube.com/watch?v=PNvLGoop8z8&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=13
5
- を参考にして、ECサイトを作っています。
6
-
7
- signupを作ったんですが、エラーは出てないですが表示されず真っ白になっています。
1
+ 今Reactでreact-routerの機能を使って、signupを表示しようとしているんですが、エラーが、出てしまいました。
2
+ ```ここに言語を入力
3
+ ERROR in ./src/Router.jsx 10:30-43
4
+ export 'BrowserRouter' (imported as 'BrowserRouter') was not found in 'react-router' (possible exports: MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes)
5
+ @ ./src/App.js 5:0-30 11:35-41
6
+ @ ./src/index.js 7:0-24 11:33-36
7
+ ```
8
8
 
9
9
  react-router-domのバージョンの問題かと思い、下げたんですがうまく行きません。
10
10
  npm install react-router-dom@5
11
-
12
11
 
13
12
  分かる方がいればよろしくお願いします。
14
13
 
15
14
  ```JavaScript
16
15
  #src/templates/Signup.js
16
+
17
- import React, { useState, useCallback } from "react";
17
+ import React from "react";
18
- import { TextInput } from "../components/UIkit";
19
- import { useDispatch } from "react-redux";
18
+ import { Route, BrowserRouter } from "react-router";
19
+
20
+ const Router = () => {
21
+ return (
22
+ <BrowserRouter>
20
- import { push } from "connected-react-router";
23
+ <Route path="/signup" component={SignUp} />
24
+ </BrowserRouter>
25
+ );
26
+ };
21
27
 
22
28
  const SignUp = () => {
23
- const dispatch = useDispatch();
24
-
25
- const [email, setEmail] = useState("");
26
- const [password, setPassword] = useState("");
27
- const [confirmPassword, setConfirmPassword] = useState("");
28
- const [username, setUsername] = useState("");
29
-
30
- const inputEmail = useCallback(
31
- (e) => {
32
- setEmail(e.target.value);
33
- },
34
- [setEmail]
35
- );
36
-
37
- const inputPassword = useCallback(
38
- (e) => {
39
- setPassword(e.target.value);
40
- },
41
- [setPassword]
42
- );
43
-
44
- const inputConfirmPassword = useCallback(
45
- (e) => {
46
- setConfirmPassword(e.target.value);
47
- },
48
- [setConfirmPassword]
49
- );
50
-
51
- const inputUsername = useCallback(
52
- (e) => {
53
- setUsername(e.target.value);
54
- },
55
- [setUsername]
56
- );
57
-
58
29
  return (
59
- <div className="c-section-container">
60
- <h2 className="u-text-center u-text__headline">アカウント登録</h2>
61
- <div className="module-spacer--medium" />
62
- <TextInput
63
- fullWidth={true}
64
- label={"ユーザー名"}
65
- multiline={false}
66
- required={true}
67
- rows={1}
68
- value={username}
69
- type={"text"}
70
- onChange={inputUsername}
71
- />
72
- <TextInput
73
- fullWidth={true}
74
- label={"メールアドレス"}
75
- multiline={false}
76
- required={true}
77
- rows={1}
78
- value={email}
79
- type={"email"}
80
- onChange={inputEmail}
81
- />
82
- <TextInput
83
- fullWidth={true}
84
- label={"パスワード（半角英数字で6文字以上）"}
85
- multiline={false}
86
- required={true}
87
- rows={1}
88
- value={password}
89
- type={"password"}
90
- onChange={inputPassword}
91
- />
92
- <TextInput
93
- fullWidth={true}
94
- label={"パスワードの再確認"}
95
- multiline={false}
96
- required={true}
97
- rows={1}`
98
- value={confirmPassword}
99
- type={"password"}
100
- onChange={inputConfirmPassword}
101
- />
102
- <div className="module-spacer--medium" />
103
- <div className="center">
104
- {/* <PrimaryButton
105
- label={"アカウントを登録する"}
106
- onClick={() =>
107
- dispatch(signUp(username, email, password, confirmPassword))
108
- }
109
- /> */}
110
- <div className="module-spacer--small" />
111
- <p className="u-text-small" onClick={() => dispatch(push("/signin"))}>
112
- アカウントをお持ちの方はこちら
113
- </p>
114
- </div>
30
+ <div>
31
+ <h1>aaaaa</h1>
115
32
  </div>
116
33
  );
117
34
  };
118
35
 
119
- export default SignUp;
36
+ export default Router;
120
37
 
121
38
  ```
122
39
 
123
40
 
124
- ```JavaScript
125
- /UIkit/TextInput.js
126
- import React from "react";
127
- import TextField from "@material-ui/core/TextField";
128
-
129
- const TextInput = (props) => {
130
- return (
131
- <TextField
132
- fullWidth={props.fullWidth}
133
- label={props.label}
134
- margin="dense"
135
- multiline={props.multiline}
136
- required={props.required}
137
- rows={props.rows}
138
- value={props.value}
139
- type={props.type}
140
- onChange={props.onChange}
141
- />
142
- );
143
- };
144
-
145
- export default TextInput;
146
-
147
- ```
148
41
 
149
42
  ```JavaScript
150
43
  #App.js
@@ -181,4 +74,61 @@
181
74
 
182
75
  ```
183
76
 
77
+ ```ここに言語を入力
78
+ #package.json
79
+ {
80
+ "name": "ec-app",
81
+ "version": "0.1.0",
82
+ "private": true,
83
+ "dependencies": {
84
+ "@material-ui/core": "^4.12.3",
85
+ "@material-ui/icons": "^4.11.2",
86
+ "@material-ui/styles": "^4.11.4",
87
+ "@testing-library/jest-dom": "^5.16.2",
88
+ "@testing-library/react": "^12.1.4",
89
+ "@testing-library/user-event": "^13.5.0",
90
+ "connected-react-router": "^6.9.2",
91
+ "firebase": "^9.6.9",
92
+ "history": "^5.3.0",
93
+ "react": "^17.0.2",
94
+ "react-dom": "^17.0.2",
95
+ "react-redux": "^7.2.6",
96
+ "react-router": "^6.2.2",
97
+ "react-router-dom": "^5.2.0",
98
+ "react-scripts": "5.0.0",
99
+ "redux": "^4.1.2",
100
+ "redux-actions": "^2.6.5",
101
+ "redux-logger": "^3.0.6",
102
+ "redux-thunk": "^2.4.1",
103
+ "reselect": "^4.1.5",
104
+ "web-vitals": "^2.1.4"
105
+ },
106
+ "scripts": {
107
+ "start": "react-scripts start",
108
+ "build": "react-scripts build",
109
+ "test": "react-scripts test",
110
+ "eject": "react-scripts eject"
111
+ },
112
+ "eslintConfig": {
113
+ "extends": [
114
+ "react-app",
115
+ "react-app/jest"
116
+ ]
117
+ },
118
+ "browserslist": {
119
+ "production": [
120
+ ">0.2%",
121
+ "not dead",
122
+ "not op_mini all"
123
+ ],
124
+ "development": [
125
+ "last 1 chrome version",
126
+ "last 1 firefox version",
127
+ "last 1 safari version"
128
+ ]
129
+ }
130
+ }
184
131
 
132
+ ```
133
+
134
+
React.js