react-router의 URL에서 해시를 제거하는 방법

react-router의 URL에서 해시를 제거하는 방법

라우팅에 react-router를 사용하고 있으며 브라우저에서 페이지를 새로 고치거나 기존 경로 중 하나의 URL을 지정하여 오른쪽 페이지로 이동할 수 있도록 hashHistory 옵션을 사용합니다.정상적으로 동작합니다만, 다음과 같은 해시가 URL 에 표시됩니다.http : //localhost / # / http ? _ k = ya6z6i

라우팅 설정은 다음과 같습니다.

ReactDOM.render((
 <Router history={hashHistory}>
    <Route path='/' component={MasterPage}>
      <IndexRoute component={LoginPage} />
      <Route path='/search' component={SearchPage} />
      <Route path='/login' component={LoginPage} />
      <Route path='/payment' component={PaymentPage} />
    </Route>
  </Router>),
    document.getElementById('app-container'));

browser History 옵션을 사용해 보셨습니까?브라우저에서 페이지를 새로 고치거나 기존 경로 중 하나의 URL을 지정하여 오른쪽 페이지로 이동할 수도 있습니다.

import { Router, Route, browserHistory } from 'react-router';

ReactDOM.render((
 <Router history={browserHistory}>
    <Route path='/' component={MasterPage}>
      <IndexRoute component={LoginPage} />
      <Route path='/search' component={SearchPage} />
      <Route path='/login' component={LoginPage} />
      <Route path='/payment' component={PaymentPage} />
    </Route>
  </Router>),
    document.getElementById('app-container'));

또한 hashHistory는 react-router github 문서를 고려하여 실제 가동용으로 사용되지 않습니다.

https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#browserhistory

hash History를 사용해야 합니까?

해시 이력은 서버를 설정하지 않아도 작동하므로, 이제 막 시작하는 경우 이 내역을 사용하십시오.단, 실가동 시에는 사용하지 않는 것이 좋습니다.모든 웹 앱은 브라우저 히스토리를 사용하기를 열망해야 합니다.

대응은 처음이지만 Browser Router를 사용했기 때문에 정상적으로 동작합니다.

    import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter, Route, Switch } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter >
    <Switch>
      {indexRoutes.map((prop, key) => {
        return <Route to={prop.path} component={prop.component} key={key} />;
      })}
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

Dennis Nerush가 위에서 언급한 것으로 알고 있습니다.{ hashHistory } 대신 {browserHistory}를 사용해야 합니다.단, 같은 페이지 렌더링이 기능하려면 서버를 조금 설정해야 합니다.

호스트 위치 또는 사용 중인 서버에 따라 몇 가지 방법이 있습니다.

Apache의 경우 .htaccess에 다음 항목을 추가해야 합니다(또는 .htaccess를 생성하여 웹 사이트의 루트 폴더에 저장).

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Node.js/ Express의 경우 다음 코드를 추가해야 합니다.

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

Nginx 서버의 경우 다음 항목을 Nginx.conf 파일에 추가해야 합니다.

location / {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
  }
}

[증폭(Amplify)]의 경우 [재작성(Rewrites)]& [리다이렉트(Redirects)]으로 이동하여 다음 정보를 포함하는 새 규칙을 추가해야 합니다(주의: AWS에서만 사용).

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200

이 주제에 대해 좀 더 조사를 하고 싶다면 여기 몇 가지 링크가 있습니다.

https://www.andreasreiterer.at/fix-browserrouter-on-apache/ #facebooks-filename (Apache 전용)

https://ui.dev/react-router-cannot-get-url-refresh/(상기 추가하지 않은 여러 서버 또는 서버 없음)

콘솔 AWS 증폭에서 반응 라우터 DOM이 올바르게 작동하지 않음(AWS 및 증폭에 이 라우터 DOM 사용)

가져오기 요 가져오기 합 가져오기 위해 가져오셔야 합니다.browserHistory부에서react-router
and pass it to the 에 전달하다<Router /> in order to remove the hash from the URLURL에서 해시를 제거하기 위해

예를 들어보세요.

import { browserHistory } from 'react-router';

<Router history={browserHistory}>
 //Place your route here
</Router>

이것을 시험해 보세요.

// v1.x
import createBrowserHistory from 'history/lib/createBrowserHistory'
<Router history={createBrowserHistory()} />

// v2.0.0
import { browserHistory } from 'react-router'
<Router history={browserHistory} />


const history = createHashHistory({ queryKey: false });
<Router history={history}>
</Router>

https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-custom-histories

https://github.com/reactjs/react-router/blob/8ef625e8fa7c41dda0f3d1d68a10b74bd93a4101/docs/guides/ba...

언급URL : https://stackoverflow.com/questions/35181989/how-to-remove-the-hash-from-the-url-in-react-router