http://localhost:3090/을 실행하면 Cannot GET 이렇게 뜹니다..
594
投稿した質問数 6
client.js 라우터 설정하고
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from '@layouts/App';
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.querySelector('#app'),
);App.tsx 도 라우터 설정하고
import React from "react";
import { Switch, Route, Redirect } from 'react-router-dom';
import LogIn from '@pages/LogIn';
import SignUp from '@pages/SignUp';
const App = () => {
return (
<Switch>
<Redirect exact path="/" to="/login" />
<Route path="/login" component={LogIn} />
<Route path="/signup" component={SignUp} />
</Switch>
);
};
export default App;이렇게 했는데
렌더링이 안되고 에러도 안생기고.. 깃허브 보면서 코드확인했는데 다른게 없는거 같은데 안되요...
回答 4
0
다시 실행하니까 됩니다... 계속 너무 질문을 많이 하는거 같아서 죄송하고 감사합니다!!
제가 궁금해서 그런데 보통 제가 리엑트 할때는 라우터를 파일을 만들어서 거기에서 전체적으로 경로를 관리하게 했는데 지금은
client.tsx와 App.tsx 두곳에 분리해서 관리하는데 제가 했던것과는 달라서 그런데 보통 이런식으로 관리하게 되나요 현업에서는??
0
네 같은 폴더안에 있어요~
0
같은 경로에 index.html도 있는 게 맞죠? 이거 어떻게 확인하는지 잘모르겟어요..
0
웹팩 설정 한 번 보여주세요. 같은 경로에 index.html도 있는 게 맞죠?
0
import path from 'path';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import webpack, { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
interface Configuration extends WebpackConfiguration {
devServer?: WebpackDevServerConfiguration;
}
const isDevelopment = process.env.NODE_ENV !== 'production';
const config: Configuration = {
name: 'sleact',
mode: isDevelopment ? 'development' : 'production',
devtool: !isDevelopment ? 'hidden-source-map' : 'eval',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
alias: {
'@hooks': path.resolve(__dirname, 'hooks'),
'@components': path.resolve(__dirname, 'components'),
'@layouts': path.resolve(__dirname, 'layouts'),
'@pages': path.resolve(__dirname, 'pages'),
'@utils': path.resolve(__dirname, 'utils'),
'@typings': path.resolve(__dirname, 'typings'),
},
},
entry: {
app: './client',
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
targets: { browsers: ['IE 10'] },
debug: isDevelopment,
},
],
'@babel/preset-react',
'@babel/preset-typescript',
],
env: {
development: {
plugins: [require.resolve('react-refresh/babel')],
},
},
},
exclude: path.join(__dirname, 'node_modules'),
},
{
test: /\.css?$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new ForkTsCheckerWebpackPlugin({
async: false,
// eslint: {
// files: "./src/**/*",
// },
}),
new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/dist/',
},
devServer: {
historyApiFallback: true, // react router
port: 3090,
devMiddleware: { publicPath: '/dist/' },
static: { directory: path.resolve(__dirname) },
// proxy: {
// '/api/': {
// target: 'http://localhost:3095',
// changeOrigin: true,
// },
// },
},
};
if (isDevelopment && config.plugins) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(new ReactRefreshWebpackPlugin());
config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true }));
}
if (!isDevelopment && config.plugins) {
config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
}
export default config;index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>슬리액</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: initial !important;
}
body {
font-size: 15px;
line-height: 1.46668;
font-weight: 400;
font-variant-ligatures: common-ligatures;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
</style>
<link rel="stylesheet"
href="https://a.slack-edge.com/bv1-9/client-boot-styles.dc0a11f.css?cacheKey=gantry-1613184053"
crossorigin="anonymous" />
<link rel="shortcut icon" href="https://a.slack-edge.com/cebaa/img/ico/favicon.ico" />
<link href="https://a.slack-edge.com/bv1-9/slack-icons-v2-16ca3a7.woff2" rel="preload" as="font"
crossorigin="anonymous" />
</head>
<body>
<div id="app">
</div>
<script src="/dist/app.js"></script>
</body>
</html>기본 셋팅과 관련하여
0
93
1
초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법
0
97
2
focus 시에만 화면 업데이트 되는 이유 + 해결방법
0
150
2
useEffect 개수 관리
0
111
2
라이브러리 서치 방법
0
104
2
함수 정의 패턴
0
77
1
npm run dev 에러
0
152
3
npx webpack 후 에러
0
178
2
'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)
0
144
2
사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')
1
179
2
초기세팅중 packge.json 에러떠요
0
157
2
CORS - Access-Control-Allow-Origin 누락 문제
0
431
3
로그인 페이지 무한 새로고침 현상
0
598
2
Module not found: Error: Can't resolve './App' 에러
0
959
1
배포 방법
0
298
2
npm run dev 시 빌드가 매우 느려졌습니다
0
992
2
alias 경로 설정 오류
0
452
2
fetcher 함수의 data 값이 두번 찍히는 이유
0
278
1
제네릭 질문
0
218
2
ts-node 대신 tsx 사용여부
0
373
1
배포 관련 질문
0
247
1
[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.
0
385
2
[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.
0
336
1
users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.
0
247
2