在哪裏把通用路由器放入React以及如何定義鏈接？

Question

這些都是非常基本的問題，但universal-router的文檔沒有解釋這一點，它給出的例子在我的React項目中似乎不起作用。

我有這個在我index.js：

import Router from 'universal-router'; 
import { HomeComponent, HelpComponent, AboutComponent } from './home.jsx'; 

const routes = [ 
    { path: '/', action:() => <HomeComponent /> }, 
    { path: '/home', action:() => <HomeComponent /> }, 
    { path: '/about', action:() => <AboutComponent /> }, 
    { path: '/help', action:() => <HelpComponent /> }, 
    { path: '*', action:() => <h1>Nope.</h1> } 
]; 

const router = new Router(routes); 

router.resolve({ path: '/' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

router.resolve({ path: '/help' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

router.resolve({ path: '/about' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

這在我App組件，一個很簡單的菜單：

export class App extends React.Component { 
    render() { 
     return(
       <div> 
        <a href="/">Root</a> |&nbsp; 
        <a href="/home">Home</a> |&nbsp; 
        <a href="/help">Help</a> |&nbsp; 
        <a href="/about">About</a> |&nbsp; 
        <a href="/uijsklfdsse">404</a> 
       </div> 
       ); 
    } 
} 

正如你看到的，這是非常簡單的，我只是想來計算如何讓這個工作。它幾乎正是寫入here,但它不起作用。出於某種原因，它總是被調用的AboutComponent，並且當我點擊一個鏈接時，瀏覽器似乎刷新了整個頁面，因此它不像SPA。我有一種感覺，我把路線定義放在錯誤的地方，但我應該把它放在哪裏？這是我應該如何定義鏈接？

我使用的是universal-router，因爲React-router在安裝時表示它已被棄用並由此替換。讓我知道這是不是一個好主意。

Answer 1

我想你應該只調用一次router.resolve。這似乎是你的應用總是以AboutComponent結束的原因。嘗試從index.js刪除這部分：

router.resolve({ path: '/help' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

router.resolve({ path: '/about' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

此外，react-router不被棄用。我建議你使用react-router： https://github.com/ReactTraining/react-router

Answer 2

你的路線看起來不錯。您可以通過處理默認的href行爲來防止刷新瀏覽器。即onClick(event) { event.preventDefault(); }

對於使用窗口History API和管理按壓狀態下，你可以使用這個history插件，我建議，或者你可以手動或使用一些其他的插件去了解它。

爲了讓你的路由器更加靈活，你可以用一個函數動態地解析你的路由，這樣你就可以隨時調用它。

而不是

router.resolve({ path: '/' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

router.resolve({ path: '/help' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

router.resolve({ path: '/about' }).then(component => { 
    ReactDOM.render(component, document.getElementById('router-outlet')); 
}); 

你可以做

const router = new Router(routes); 

function renderRoute(location) { 
    router.resolve({ path: location.pathname }).then(component => { 
    render(component, document.getElementById('router-outlet')); 
    }); 
} 

renderRoute(window.location); 

，然後調用renderRoute只要窗口路徑的變化。

隨着history，它通過提供一個偵聽器和其他幾個有用的功能使這更容易。你所要做的就是創建一個實例並在整個應用中使用它。

做一個單身的地方（即history.js）

import createHistory from 'history/createBrowserHistory'; 
export default createHistory(); 

並使用它爲您的資產淨值

... 
import history from './history.js'; 

export class App extends React.Component { 
    handleClick(event) { 
    event.preventDefault(); 
    history.push({ 
     pathname: event.currentTarget.pathname 
    }); 
    } 
    render() { 
     return(
     <div> 
      <a href="/" onClick={this.handleClick}>Root</a> |&nbsp; 
      <a href="/home" onClick={this.handleClick}>Home</a> |&nbsp; 
      ... 
     </div> 
    ); 
    } 
} 

和路由索引

import history from './history.js' 
... 

renderRoute(history.location); 

history.listen(renderRoute); 

這how-to去多一點的深度，如果你想知道更多。