-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
오류가 뜹니다.
21.11.06 20:43 작성 조회수 998
0
코드를 컴파일하고 실행하면 vscode자체에서는 실행이 되는데 정작 localhost:3000에 접속하면 이렇게 뜹니다. 소스코드는 아래와 같습니다.
import React from 'react';
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom";
function App() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="about">About</Link>
</li>
<li>
<Link to="dashboard">Dashboard</Link>
</li>
</ul>
<hr />
<Routes>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Routes>
</div>
</Router>
);
}
export default App;
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}
답변을 작성해보세요.
2
초보
2021.11.07
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import LandingPage from "./components/views/LandingPage/LandingPage";
import LoginPage from "./components/views/LoginPage/LoginPage";
import RegisterPage from "./components/views/RegisterPage/RegisterPage";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/login">About</Link>
</li>
<li>
<Link to="/register">Users</Link>
</li>
</ul>
</nav>
<Routes>
<Route exact path="/" element={<LandingPage />}></Route>
<Route exact path="/login" element={<LoginPage />}></Route>
<Route exact path="/register" element={<RegisterPage />}
></Route>
</Routes>
</div>
</Router>
);
}
박찬민
2021.11.17
위의 코드를 붙여넣기 했는데 오류가 이렇게 뜹니다..ㅠ
Failed to compile
src\App.js
Line 29:10: 'Routes' is not defined react/jsx-no-undef
Line 39:2: 'Topics' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.This error occurred during the build time and cannot be dismissed.
0
bewisessong
2021.11.06
<Routes> 태그가 존재하지않는 태그인데 사용해서 발생하는걸로 보여서
코드 복사해서 <Routes> </Routes> 삭제하고 실행하니까 잘되네요 !
JH HE
질문자2021.11.06
혹시 코드 좀 보내주실 수 있나요? 그냥 삭제하고 실행하니까 Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.라고 뜨네요...
bewisessong
2021.11.07
실행한 환경/코드 공유드립니다~
react :^17.0.2
react-router-dom : ^5.3.0
import React from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from "react-router-dom";
function App() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="about">About</Link>
</li>
<li>
<Link to="dashboard">Dashboard</Link>
</li>
</ul>
<hr />
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</div>
</Router>
);
}
export default App;
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}
답변 2