2016-09-30 1 views
0

저는 React를 처음 사용합니다. 내 상황은 다음과 같습니다 :파운드 기호없이 대응 라우터를 만드는 방법?

페이지가 React에 있지만 React 브라우저 기록을 사용하면 모든 URL에 # 기호가 있어야합니다. 따라서 URL은 http://www.somedomain.com/path/#/login입니다. 이 URL을 제 3 자 url에 보내야합니다 (예 : http://www.thirdparty.com/verify?callback=http%3A%2F%2Fwww.somedomain.com%2Fpath%2F%23%2Flogin). 문제는 그들이 URL에 #을 허용하지 않는다는 것입니다. 그들이 허용하는 유일한 URL 형식은 http://www.somedomain.com/path/login과 같습니다. 그러면 URL 뒤에 몇 가지 매개 변수가 추가되고 마지막으로 콜백 http://www.somedomain.com/path/login?code=something&state=somestate이 추가됩니다.

나는 이것을 어떻게 얻을 수 있을까? Apache 또는 Nginx URL 재 작성을 포함한 모든 가능한 솔루션이 허용되며 React 라우터 솔루션에 국한되지 않습니다. 미리 감사드립니다.

내 코드는 다음과 같습니다 : 당신은 역사 공급자로 browserHistory를 사용해야합니다

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    }; 
    } 

    render() { 
    const appHistory = useRouterHistory(createHashHistory)({ queryKey: false }); 
    return (
     <Router history={appHistory}> 
     <Route path="/" component={Main}> 
      <IndexRoute component={Home} /> 
      <Route path="login" component={Login} /> 
      <Route path="mypics" component={MyPics} onEnter={requireAuth} /> 
     </Route> 
     </Router> 
    ); 
    } 
} 

답변

1

.

import React from "react"; 
import ReactDOM from "react-dom"; 

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

class App extends React.Component { 
    render() { 
     return (
      <Router history={browserHistory}> 
       <Route path="/" component={...}> 
        ... 
       </Route> 
      </Router> 
     ); 
    } 
} 

// Render the main component into the dom 
ReactDOM.render(<App />, document.getElementById("app")); 
+0

고마워요! 그것이 올바른 방법입니다. 그러나 나는 hashhistory 내 페이지가 서버에 어떤 요청도 보내지 않을 것이라는 것을 발견했기 때문에 hashhistory를 좋아하지만 browserhistory를 사용하면 서버에 요청을 보내고 단일 페이지 응용 프로그램 동작을 위반 한 것으로 보입니다. 나는 개인적으로 그것을 좋아하지 않는다. 콜백에 또 다른 특수 URL을 사용하려고 시도하고 내 hashhistory로 다시 리디렉션합니다. 어쨌든 고마워! –

관련 문제