在ReactJS中進行路由

Question

誰能向我解釋路由在Reactjs中是如何工作的？

browserHistory.push('/location')

僅更新網址欄，而不重定向到它。

browserHistory.goBack()

有效，但僅當以前訪問過頁面時有效，因此為名稱。 這使我很難理解browserHitory.goForward（）的工作方式？

成功登錄后，我一直試圖重定向到儀表板。 而已。

根據我的閱讀，React不允許重新加載頁面。 如果我們嘗試刷新頁面或在url中寫入地址，它將顯示無法獲取/ path錯誤； 除非在服務器上發出請求。 我試圖在服務器上創建路由，但是無法獲得有關如何實現的語法。 我僅在Node中編碼了將res.send（）發送到客戶端應用程序的程度。 如何渲染該路徑？ 因為渲染到該路徑將意味着Node的App.js具有React應用程序的視圖引擎。 我不知道是否足夠清楚，但是任何建議都會有所幫助。 謝謝。

Answer 1

首先是定義在路由器即可以觀看完整的路由這兩個視頻的所有URL 第1部分 第2部分

您忘記添加使用browserHistory.replace（'/ location'）的另一件事是，在子路由中不要包含/，例如使用<Route path='submissions' component={Submissions} />

export default ( <Router history={browserHistory}> 
<Route component={App}> 
<Route path='/' component={Home} /> 
<Route path='/submissions' component={Submissions} />
<Route path='/location' component={Location} /> 
<Route path='/login' component={Login} /> 
<Route path='/dashboard' component={Member} /> 
</Route> </Router> );

Answer 2

Index.js

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

組件BrowserRouter將歷史對象包裝在瀏覽器中，並將其向下傳遞到組件樹。 在組件樹中的任何地方，我們都可以使用歷史對象。 然后，我們需要在app.js中注冊路線。

app.js

import { Route, Redirect, Switch } from "react-router-dom";
class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <main className="container">
          <Switch>
            <Route path="/not-found" component={NotFound} />
            <Route path="/register" component={RegisterForm} />
            <Route path="/login" component={LoginForm} />
            <Redirect from="/" exact to="/home" />
            <Redirect to="/not-found" />
          </Switch>
        </main>
      </div>
    );
  }
}

export default App;

如果我們不使用“ Switch”，則react將首先讀取“ /”，並且由於該路由正在返回首頁，因此每條路由也會返回首頁。 例如，

<Route path="/register" component={RegisterForm} />

這將返回“ RegisterForm”和主頁。 使用“交換機”，我們必須從最具體的路由器到最通用的路由器訂購。 表示“ /”應在底部。

現在我們有一個問題。 每次我們從一個頁面導航到另一頁面時，我們都會收到來自服務器的http請求。 所有組件都是捆綁包的一部分，並且在應用程序加載時已經下載了，因此無需重新加載它們。 而不是重新加載整個頁面的所有資產，我們應該只更新內容區域中的內容。 解決的辦法是應將所有錨定替換為react-router-dom中的“ Link”。 鏈接組件沒有“ href”屬性，而是有“ to”。 每次我們單擊鏈接時，“鏈接”都會有一個點擊事件。 它將阻止Default（）。 因此，讓我們使用Link創建一個簡單的按鈕：

import { Link } from "react-router-dom";

  <div className="col">
      <Link to="/products/new" className="btn btn-primary my-2">
        New Products
      </Link>
 </div>

首先，我說過BrowserRouter將歷史記錄對象包裝在瀏覽器中，並將其向下傳遞到組件樹。 因此，我們通過“路線”訪問它。 當我們注冊路線時，“路線”會自動將“歷史記錄，位置，匹配”道具注入組件中。 如果您需要將其他道具傳遞給已路由的組件，請執行以下操作： 而不是組件屬性，我們應該使用render屬性。

<Route path="/products" render={(props) => <Products sortBy= “newest” {...props} /> }  />

請注意，如果我們不傳遞“道具”，則歷史記錄，位置和匹配項將消失。

當用戶單擊按鈕或提交表單時，我們希望將其導航到其他頁面。 “歷史記錄”對象負責導航：后退，前進，推動和替換

PUSH：push方法將在瀏覽器歷史記錄中添加一個新地址，因此您單擊后退按鈕，然后返回到原來的位置。

REPLACE：替換當前地址，因此我們沒有歷史記錄。

handleSave = ( )  => { this.props.history.push ("/products"); };

我們可以讀取路線參數，並使用“ match”對象將其傳遞給組件。 因此，我們可以在下面的ProductDetails頁面中呈現此信息。

<div>
        <h2> productDetails-{this.props.match.params.id} </h2>
    </div>

查詢字符串參數在“位置”對象中。

Answer 3

您可能更籠統地想知道單頁應用程序路由的工作方式。

網上有關於此主題的無窮資源。

這是我非常贊賞的一篇反動的文章： https ://hackernoon.com/routing-in-react-the-uncomplicated-way-b2c5ffaee997