인프런 커뮤니티 질문&답변
작성한 질문수
오류가 뜹니다.
작성
·
1.3K
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
2
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>
);
}
위의 코드를 붙여넣기 했는데 오류가 이렇게 뜹니다..ㅠ
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
JH HE
질문자
혹시 코드 좀 보내주실 수 있나요? 그냥 삭제하고 실행하니까 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>.라고 뜨네요...
실행한 환경/코드 공유드립니다~
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>
);
}
감사합니다! 덕분에 해결할 수 있었습니다.