react-router-dom - 直接導航到路由

使用react-router-dom時，我應該能夠創建一個路由並通過在URL中手動輸入路徑來導航到它？react-router-dom - 直接導航到路由

const App =() => 
<Provider store={store}> 
    <Router> 
     <div> 
      <Route exact path="/" component={QuotesLandingPage} /> 
      <Route path="/prequote" component={LoadingSpinner} /> 
     </div> 
    </Router> 
</Provider>;

所以，我將在本地主機上，並且當我手動鍵入「/prequote」在navbar它不重定向到我已指定該組件的url的端部，而不是將其拋出一個404。

這是預期的行爲？

我一直在尋找答案，並看到一些建議，配置webpack（我使用webpack）有devServer.historyApiFallback = true應該工作，但它沒有爲我工作。

來源

2017-04-24 Paul C

其中您使用的是react-router-dom版本嗎？ –

@TaylorKing我正在使用v4.1。1 –

我假設你的導入語句如下所示： –

是的，您可以通過在Url中手動輸入路徑來導航到任何已定義的路徑。例如：在下面的代碼中，我創建了兩個組件儀表板和信息，我使用react-router-dom在我的應用程序中提供路由功能。使用以下代碼可以導航到特定的組件。如果你將進入http://server:port/dashboard它會瀏覽你的儀表板組件，如果你將進入http://server:port/information它會瀏覽你的信息組件

App.js文件

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; 
import React from 'react'; 
import Dashboard from './Dashboard.js'; 
import Information from './Information.js'; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {open: false}; 
    this.state = {message: "StackOverflow"}; 
    } 
render(){ 
    return (
     <Router> 
      <div> 

      <Route exact path="/dashboard" render={props => <Dashboard {...props} />} /> 
      <Route exact path="/information" render={props => <Information {...props} />} /> 
      </div> 
     </Router> 
    ); 
}

}

儀表板.js

import React from 'react'; 


class Dashboard extends React.Component { 

    render() { 

    return (
      <div ><h1> Hello React</h1></div> 
    ); 
    } 
} 

export default Dashboard;

個

Information.js

import React from 'react'; 


class Information extends React.Component { 

    render() { 

    return (
      <div ><h1> Hello React-Router-DOM</h1></div> 
    ); 
    } 
} 

export default Information;

我希望這會幫助你。

來源

2017-05-05 02:51:02

也許你對歷史跟蹤回退有同樣的困惑，就像我曾經做過的一樣。我將從https://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option引用：

但是，如果您在Webpack配置中修改了output.publicPath，則需要指定要重定向到的URL。這是使用historyApiFallback.index選項完成的。
historyApiFallback: { 
    index: '/foo-app/' 
} 

在我來說，我終於得到它通過改變historyApiFallback選項：

historyApiFallback: { 
    index:'dist/' 
},

把它當成指數： 'DIST/index.html的'，送達而不是devServer投擲404.

乾杯

來源

2017-05-11 15:48:51

react-router-dom - 直接導航到路由

回答

相關問題