이전 리액터-라우터(# 포함)를 BrowserRouter로 리디렉션하는 방법?

이전 리액터-라우터(# 포함)를 BrowserRouter로 리디렉션하는 방법?

우리는 교체한다.react-router-doms HashRouter와 함께BrowserRouter오래된 노선을 새로운 노선으로 바꾸고 싶어해나는 태그를 달았다.nginx거기로 우회전해도 상관없으니까:)

그러니 옛날 길이 있다고 해/#/users그리고/#/users:id: 일치시키고 다음으로 리디렉션해야 한다./users그리고/users/:id.

지금까지 노력했다(react-router-dom v5.0.1):

<Router>
  <Switch>
    <Route path='/users' component={UsersComponent} />
    <Route path='/users/:id' component={UsersDashComponent} />
  </Switch>
  <Redirect from='/#/users' to '/users' />
  <Redirect from='/#/users/:id' to='/users/:id' />
</Router>

첫 번째 노선이 일치하고 방향을 바꾸면 좋다.두 번째 (와 함께)id)은 문제가 있다.탐색할 때/#/users/123로 방향을 바꾸다./users/:id. 실물을 대체하고 있다.123와 함께:id.

그것들은 노선의 두 가지 예다.우리는 또한 방향을 바꿀 수 있는 매개 변수가 더 많다.

네비게이션은 이런걸로 하는거 같은데

<Link to="/#/users" />
<Link to="/#/users/123" />

문서에 따르면

A <Router>URL의 해시 부분(예: window.location.hash)을 사용하여 UI를 URL과 동기화 유지

사용시HashRouter미리 준비할 필요는 없다.#라우터 자동 응답 추가#에URL

그러니 당신의 길은,

import { HashRouter } from 'react-router-dom'


<HashRouter>
  <Switch>
    <Route exact path='/users' component={UsersComponent} />
    <Route exact path='/users/:id' component={UsersDashComponent} />
  </Switch>
</HashRouter>

그리고 링크는,

<Link to="/users" />
<Link to="/users/123" />

이제 어떻게 교체할 것인가에 대한 질문으로 넘어가자.HashRouter와 함께BrowserRouter?

그러기 위해선 그냥 이렇게 하면 돼

import { BrowserRouter } from 'react-router-dom'


<BrowserRouter>
  <Switch>
    <Redirect from='/#/users' to '/users' />
    <Redirect from='/#users/:id' to='/users/:id' />
    <Route exact path='/users' component={UsersComponent} />
    <Route exact path='/users/:id' component={UsersDashComponent} />
  </Switch>
</BrowserRouter>

그리고 당신의 연결고리는 같아야 한다.

참고: 또한 내가 추가한 룩을 보십시오.exact로route, 그것은 정확히 일치할 것이다.path.

솔직히 말해서, 이 해결책들 중 어느 것도 나에게 효과가 없었다. 나는 내 이전의 모든 노선에서 새로운 노선으로의 방향을 바꾸고 싶었다.#.

대부분의 경우 합격된 답변은 괜찮지만, 나 역시 404대를 취급하고 있는데, 이는 실제로 그런 리디렉션에 걸리지 않을 것이다.

스위치를 렌더링하기 전에 라우터 반응 기록과 상호 작용하는 가드를 추가함:

function App() {
  const history = useHistory()

  if (location.hash.startsWith('#/')) {
    history.push(location.hash.replace('#', '')) // or history.replace
  }

  return (
    <Switch>
      <Route path="/" exact component={ Home } />
      ...
      <Route path="*" component={ PageNotFound } />
    </Switch>
  )
}

내 해결책은 다음과 같다.

<Router>
  <Switch>
    <Route path='/users' component={UsersComponent} />
    <Route path='/users/:id' component={UsersDashComponent} />
    <Route exact path='/' render={({ location }) => <Redirect to={location.hash.replace('#', '')} />} />
  </Switch>
</Router>

다음 경로만 해당 경로만/#일치할 것이다/어떤 것을 뿌리째 렌더링하기 위해 필요하다면 쉽게 조건부를 추가할 수 있다.

export const history = createBrowserHistory();

export const App: FC = () => {
   return (
     <Router history={history}>
       <Switch>
        <Route path="/settings" exact component={Settings} />
       </Switch>
     </Router>
  );
};


export const Settings : FC = () => {
   return (
      <HashRouter basename="/" hashType="noslash">
        <Switch>
              <Route path="/profile">
                <Profile />
              </Route>
       </Switch>
    </HashRouter>
  );
};

 import {history} from "./App.tsx";

 export const Profile : FC = () => {
      return (
        <Router history={history}>
           <Link to="/product/1"/>
        </Router>
       );
    };

  // It's simple store your history in a variable and make use of it

참조URL: https://stackoverflow.com/questions/56981230/how-to-redirect-old-react-router-hashrouter-with-the-to-browserrouter