今Reactでreact-routerの機能を使って、signupを表示しようとしているんですが、以下のようなエラーが出てしまいました。
ERROR in ./src/Router.jsx 10:30-43 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) @ ./src/App.js 5:0-30 11:35-41 @ ./src/index.js 7:0-24 11:33-36
react-router-domのバージョンの問題かと思い、下げたんですがうまく行きません。
npm install react-router-dom@5
分かる方がいればよろしくお願いします。
JavaScript
1#Router.jsx 2 3import React from "react"; 4import { Route, BrowserRouter } from "react-router"; 5 6const Router = () => { 7 return ( 8 <BrowserRouter> 9 <Route path="/signup" component={SignUp} /> 10 </BrowserRouter> 11 ); 12}; 13 14const SignUp = () => { 15 return ( 16 <div> 17 <h1>aaaaa</h1> 18 </div> 19 ); 20}; 21 22export default Router; 23
JavaScript
1#App.js 2import React from "react"; 3import Router from "./Router"; 4 5const App = () => { 6 return ( 7 <main className="c-main"> 8 <Router /> 9 </main> 10 ); 11}; 12 13export default App; 14
#package.json { "name": "ec-app", "version": "0.1.0", "private": true, "dependencies": { "@material-ui/core": "^4.12.3", "@material-ui/icons": "^4.11.2", "@material-ui/styles": "^4.11.4", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", "connected-react-router": "^6.9.2", "firebase": "^9.6.9", "history": "^5.3.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.6", "react-router": "^6.2.2", "react-router-dom": "^5.2.0", "react-scripts": "5.0.0", "redux": "^4.1.2", "redux-actions": "^2.6.5", "redux-logger": "^3.0.6", "redux-thunk": "^2.4.1", "reselect": "^4.1.5", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。