programing

리액트 라우팅은 다른 URL 경로를 처리할 수 있지만 Tomcat은 404개의 사용 불가능한 리소스를 반환합니다.

padding 2023. 3. 29. 21:16
반응형

리액트 라우팅은 다른 URL 경로를 처리할 수 있지만 Tomcat은 404개의 사용 불가능한 리소스를 반환합니다.

에 대한 작은 프로젝트가 있습니다.reactjs같이 놀면서 배울 수 있는 기회죠.URL 경로에 따라 표시되는 헤더의 유형을 지정해야 합니다.다음으로 루팅을 처리하는 index.js를 나타냅니다.

 const history = useRouterHistory(createHistory)({
     basename: '/test'
})
class Tj extends React.Component {

render() {

    return (
        <Router history={history}>
            <Route path={"/"} component={Bridge} >
                <IndexRoute component={Home} />
                <Route path={"user"} component={T} />
                <Route path={"home"} component={Home} />
            </Route>
            <Route path={"/t/"} component={Bridge2} >
                <IndexRoute component={T} />
                <Route path={"contact"} component={Home} />
            </Route>
        </Router>
    );
}
}
render(
<Provider store={store}>
    <Tj/>
</Provider>,
window.document.getElementById('mainContainer'));

보시는 바와 같이 저는 루트 디렉토리로 테스트를 사용하고 있으며 url에 대한 사용자의 입력에 따라 어떤 헤더를 사용해야 할지 결정합니다.또한 Bridge2.js:

export class Bridge2 extends React.Component {
render() {

    return (
        <div>
            <div className="row">
                <Header2/>
            </div>
            <div className="row">
                {this.props.children}
            </div>
        </div>
    );
}
}

브릿지.js:

export class Bridge extends React.Component {
render() {
  //  alert(this.props.children.type);
    var Content;

    if(this.props.children.type){
    Content=<div>
        <div className="row">
            <Header/>
        </div>
        <div className="row">
            {this.props.children}
        </div>
    </div>;
    }
    else{
        Content=<div>
            <div className="row">
                <Header/>
            </div>
            <div className="row">
                {this.props.children}
            </div>
        </div>;
    }
    return (
        Content
    );
}
}

웹 팩 개발 서버에서 실행하면 모든 것이 정상적으로 작동합니다.를 들어, ★★★★★★★★★★★를 사용하는 경우 등.http://localhost:3003/test/되어 브릿지를 하고 있는 .js의 경우http://localhost:3003/test/t/bridge2.dload는 로딩되어 있습니다.

다만, Web pack dev 서버가 실가동 서버가 아니기 때문에, 현재는 이클립스 Web 어플리케이션프로젝트를 사용하고 있으며, bundle.js 파일과 index.html을 거기에 카피하고 있습니다.문제는 Tomcat 서버를 실행하면 다음 경로를 인식하고 표시할 수 있다는 것입니다.

http://localhost:8080/test/, 의우의 경우http://localhost:8080/test/t/

HTTP 상태 404 - /test/t/

기본적으로 리소스 파일을 사용할 수 없습니다.Web pack dev 서버에서는 라우팅이 정상적으로 동작하기 때문에 코딩에는 문제가 없지만 Tomcat에서는 리액트라우팅이 처리되지 않는 것 같습니다.제가 하는 일에 무슨 문제가 있나요?이런 식으로 할 수 있나요?

아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아,react-router.

「 」를 localhost:3003/test/되며, 그후 "서버 "서버 "", "서버", "서버", "서버"가 됩니다./test/index.html , . . . . . . . .js 들,,css, ...

그 후 내부 링크를 클릭할 때마다(예: localhost:3003/test/t/브라우저는 서버를 다시 요구하지 않습니다. React-router는 다른 서버 요청을 트리거하지 않고 이 클라이언트 측을 해결하고 페이지의 일부를 다시 렌더링하고 브라우저의 주소 표시줄(HTML5 사용)을 업데이트합니다.

「 」를 localhost:3003/test/t/에는 "Tomcat"이 ./test/t/index.html 혹혹 、 를를 、 를를 、 를를를 a a 를 a a or a or or or 를 or 를 or 를 or 를 or 를 or 。404은 Tomcat에 대해 react-redux 않다javascript.

은, 「」를 설정하는 입니다.404: " " 에 ./test/index.html기본적으로는 웹 팩 개발 서버가 구성되어 있을 것입니다.

Tomcat Apache 가가 tomcat 。(Search(검))html5 pushstate apache config.

다음은 예를 제시하겠습니다.

httpd.conf:

...
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>
...

만 사용하는 " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " 에서 할 수 .web.xml your 、「 」.war 삭제:

...
<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>
...

은 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.react-router 문제, 앱, HTML5를 사용하는 앱pushstate()는 이 를 보다할 수 .자바스크립트

Tomcat 8 이상에는 이를 위한 간단한 솔루션이 내장되어 있습니다.이를 처리하기 위해 Apache 뒤에 두거나 해시 라우팅으로 전환하거나 자신의 서버 상의 다른 곳으로 돌아가기 위해 리다이렉트 페이지를 해킹할 필요가 없습니다.

Tomcat 리라이트 사용

React, Angular, ExtJS 등과 같이 UI 라우팅이 있는 모든 단일 페이지 앱 프레임워크에서 작동합니다.

한마디로:

를 1) RewriteValve에 합니다./tomcat/webapps/{your-web-app-directory}/META-INF/context.xml

<?xml version="1.0" encoding="UTF-8"?>
<Context>  
  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
  ... your other context items
</Context>

2) )다다 named named named named named named named named named named named named named named named named named named named named를 ./tomcat/webapps/{your-web-app-directory}/WEB-INF/rewrite.config다음으로 인덱스 페이지를 포인트 하는 경로의 개서 규칙을 추가합니다.

RewriteRule ^/user(.*)$    /index.html [L]
RewriteRule ^/home(.*)$    /index.html [L]
RewriteRule ^/contact(.*)$ /index.html [L]

이러한 규칙에 따라 Tomcat은 이러한 3개의 이름 있는 경로를 가진 모든 요청을 index.html로 직접 전송하도록 지시합니다.

3) Tomcat 재부팅

규칙은 특정 경로를 제외한 모든 요청을 index.html로 전송하는 등 보다 고급스러워질 수 있습니다.이러한 요구는, 다음의 경우에 편리합니다./api 전화index.html"Tomcat Rewrite" "Tomcat Rewrite" "Tomcat Rewrite" "Tomcat Rewrite" 입니다.

라우팅이 기능하지 않는 것과 같은 문제가 있습니다.404가 리다이렉트 및 로딩되지 않은 경우 index.html 문제나는 여러 가지 방법을 시도했고 마침내 내 문제를 해결할 해결책을 찾았다.

이것은 Tomcat 8에서 작동했습니다.

inside ROOT folder of Tomcat make a new folder WEB-INF and create web.xml

이 작업을 수행할 수 있습니다.

sudo gedit /opt/tomcat/webapps/ROOT/WEB-INF/web.xml

다음 내용을 web.xml에 붙여넣습니다.

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <display-name>your_display_name</display-name>

    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>

</web-app>

Tomcat을 재시작합니다.이것으로 라우팅 문제가 해결되었습니다.

이 솔루션은 JSP 엔진(예: Tomcat)의 회피책과 비슷하지만 최소한의 코드로도 충분히 작동합니다.

"index.jsp"는 (콘텐츠 루트 폴더에) "index.html"과 병렬로 다음 코드를 사용하여 작성했습니다.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="index.html"%>

web.xml에서 이 JSP로 리다이렉트 하도록 모든 URL을 설정했습니다.

web.xml

<servlet>
    <servlet-name>index</servlet-name>
    <jsp-file>index.jsp</jsp-file>
</servlet>
<servlet-mapping>
    <servlet-name>index</servlet-name>
    <url-pattern>/*</url-pattern>
</servlet-mapping>

이제 Tomcat에 요청된 URL은 index.jsp로 내부적으로 리다이렉트됩니다.이것은 사실상 index.html입니다.리액트 라우터가 브라우저에 로드되면 올바른 컴포넌트와 후속 요청을 렌더링합니다.

저 같은 경우에는 고객 오류 페이지 작성과 같은 간단한 솔루션을 원했습니다. 이 은 여전히 합니다.404그건 바람직하지 않아요.

그래서 작은 jsp 파일을 사용하여 상태 코드를 설정합니다.200를 하기 전에index.html.

사람이 않고 데 합니다.404.

web.xml

<error-page>
    <error-code>404</error-code>
    <location>/spa.jsp</location>
</error-page>

spa.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%
    response.setStatus(200);
%><%@include file="./dashboard/index.html"%>

Tomcat " " 8 " " 입니다.추가만 하면 됩니다.web.xml를 줄지어 404로 index.html.

webapps / [ my - app - name ] /WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
          http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
          version="2.4">

  <display-name>my-app-name</display-name>

  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>

</web-app>

OP의 질문에 대한 답변은 기본 서블릿을 통한 정적 리소스에 대한 액세스도 다루어야 한다고 생각합니다.

이 문제는 멀티뷰 리액트애플리케이션에서 나타나는데, 여기서 라우터는 어플리케이션 상태를 반영하기 위해 페이지 URL을 변경하는데 사용됩니다.이것은 좋지만 실수로 페이지를 새로고침하면 변경된 URL과 일치하는 리소스가 없기 때문에 404가 표시됩니다.또한 이러한 변경된 URL을 다른 응용프로그램 보기에 대한 직접 액세스로 북마크할 수 없습니다.서버측에서 약간의 도움을 받지 않으면요.

스태틱 리소스에 대한 액세스 처리 방법이나 선택한 구현(필터, 서블릿 또는 심지어 JSP)에 따라 더 많은 솔루션이 가능하지만 기본 개념은 React에서 정의된 모든 루트에 대해 메인 애플리케이션 HTML 파일을 제공하는 것입니다.

어플리케이션에 2개의 리액트루트가 정의되어 있다고 가정합니다.

<Route path={"view1"} component={View1} />
<Route path={"view2"} component={View2} />

Router Servlet을 생성하여 /view1 또는 /view2로 요구를 컨텍스트루트(/)로 되돌릴 수 있습니다.여기서 어플리케이션을 매핑했다고 가정합니다.

void doGet(HttpServletRequest request, HttpServletResponse response) 
        throws ServletException, IOException 
{
    request.getServletContext().getRequestDispatcher("/").forward(request, response);
}

다음과 같이 설정할 수 있습니다.

<servlet>
    <servlet-name>RouterServlet</servlet-name>
    <servlet-class>package.RouterServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>RouterServlet</servlet-name>
    <url-pattern>/view1/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>RouterServlet</servlet-name>
    <url-pattern>/view2/*</url-pattern>
</servlet-mapping>

Tomcat에잘, 것은 가 "Tomcat", "Tomcat", "Tomcat", "Tomcat"을 있다는 것입니다./test/t ★★★★★★★★★★★★★★★★★」/test/t/index.html파일이 존재하지 않기 때문에 404 오류를 반환합니다.

브라우저 기록을 사용하는 경우 라우팅을 처리할 수 있는 서버가 필요합니다., 은 와일드 카드 「」, 「」)가 .*를 index.htmlfile(인덱스 파일에 포함된 다른 정적 파일과 함께 번들된 js를 반환합니다).

1가지 해결책은 해시 라우터를 사용하는 것입니다.서버에서 라우팅을 수행할 수 없는 경우(특히 스태틱콘텐츠를 호스트하는 사용자와 관련된 경우), 해시 라우팅이 필요합니다.단, 서버를 사용하고 있기 때문에 브라우저 라우터를 사용할 수 있는 루팅을 설정할 수 있어야 합니다.

앞서 말씀드린 것처럼 Tomcat에 익숙하지 않기 때문에 설정 내용만 설명하겠습니다.

  1. 정적 파일에 대한 모든 요청은 정기적으로 처리되어야 합니다.
  2. 에 대한 기타 :/test/*서 *는 임의의 URL은 (*의 URL)을 index.htmlfilename을 클릭합니다.

언급URL : https://stackoverflow.com/questions/41246261/react-routing-is-able-to-handle-different-url-path-but-tomcat-returns-404-not-av

반응형

'programing' 카테고리의 다른 글

투영기 "by.css()" vs "$"()" "$" vs "$"(") "Bling Bling"  (0) 2023.03.29
Wordpress 플러그인 업로드 양식이 헤드리스 브라우저에서 활성화되지 않음  (0) 2023.03.29
JSON 구문 오류: '예상하지 않은 번호' 또는 'JSON.parse: 개체의 속성 값 뒤에 ' , 또는 '}'이(가) 있어야 합니다.'  (0) 2023.03.29
GSON을 사용한 JSON 파일 해석  (0) 2023.03.29
개체를 인코딩 가능한 개체로 변환하지 못했습니다.  (0) 2023.03.29

'programing'의 다른글

  • 현재글리액트 라우팅은 다른 URL 경로를 처리할 수 있지만 Tomcat은 404개의 사용 불가능한 리소스를 반환합니다.

관련글

댓글

티스토리툴바