2016-11-10 63 views
1

我正在使用react-router,除了當我直接轉到URL時,一切工作正常。例如,如果我點擊應用中的「/ quizreview?quizId = nAUl3DmFlX」鏈接,它可以正常工作。但是,如果我輸入的URL 「http://localhost:3000/quizreview?quizId=nAUl3DmFlX」 它說:直接轉到路由器URL不起作用

不能得到/ quizreview quizId = nAUl3DmFlX

這裏是我的路由器代碼:

ReactDOM.render((
<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={UserQuiz} onEnter={loginRequired}/> 
     <Route path="/login" component={Login}/> 
     <Route path="/quiz/:id" component={Quiz}/> 
     <Route path="/quizreview" component={PostQuiz}/> 
     <Route path="/quizquestions/:quizId" component={QuestionForm}/> 
     <Route path="/questionreview/:questionId" component={QuestionReview}/> 
     <Route path="/noquestions" component={NoQuestionsDialog}/> 
    </Route> 
</Router> 
), document.getElementById('app')); 

難道我做錯了什麼嗎?我遵循React-Router教程,它運行良好,我相信我遵循相同的指示,但出現此問題。

+1

React不是我的強項,但我的猜測是,如果您將此鎖定在「loginRequired」後面,直接訪問URL後用戶不再被驗證,從而阻止加載模塊。如果不是這種情況,請嘗試使用'hashHistory'而不是'browserHistory'。 –

回答

0

如果您使用的是HTML5,然後直接與browserHistory訪問的URL,如果您使用的WebPack

什麼historyApiFallback做你需要有historyApiFallback: true在你的WebPack文件,是讓讓你的服務器返回index.html無論URL您嘗試訪問,並因爲你的路線然後相對於配置的index.html這樣你就可以訪問任何路徑URL直接

否則,你可以嘗試和替代,即用history={hashHistory}react-router然後訪問您的url like

http://localhost:3000/#/quizreview?quizId=nAUl3DmFlX 
+0

只需添加一點:'historyApiFallback'的作用就是讓你的服務器返回'index.html',無論你嘗試訪問哪個URL。您可以設置幾乎任何服務器以這種方式進行操作(並且這是您在生產中使用'browserHistory'所需執行的操作)。 –

+0

非常感謝你,這個伎倆。 –

+0

很高興有幫助。 –