陣營路由器2更有效的路由

我使用的一個項目，我從去年開始，使用陣營路由器2，這是我的使用陣營路由器2陣營路由器2更有效的路由

const routes = (
    <Router> 
    <Route path="/" component={Home}/> 
    <Route path="about" component={About}/> 
    <Route path="work" component={Work}/> 
    <Route path="contact" component={Contact}/> 
    <Route path="project/:project" component={ProjectPage}/> 
    <Route path="tictactoe/demo" component={TicTacToePage}/> 
    <Route path="blog/:blogid" component={BlogPage}/> 
    <Route path="*" component={NotFoundPage}/> 
    </Router> 
); 

export default routes;

每個項目的詳細信息頁面當前的路由配置存儲在JSON在服務器上，而我的項目頁面如下：

class App extends Component { 
    render() { 
    const url = this.props.routeParams.project; 
    const Project = Data.find(page => page.name === url); 
    if (Project !== undefined) { 
     return (
     <Layout> 
      <div className="page-container"> 
      <h1> { Project.title } </h1> 
      </div> 
     </Layout> 
    ) 
    } else { 
     return (
     <Layout> 
      <NotFoundPage /> 
     </Layout> 
    ) 
    } 
    } 
} 

export default App;

加載項目頁面時，當然我遇到了比正常加載速度慢一點由於數據所需的查詢.json文件：

export const Data = [ 
    {id: 0, name: 'tictactoe', title: 'Coding an unbeatable TicTacToe opponent', demo: 'tictactoe/demo'} 
]

這是提供更多動態路由基於服務器端與React的最佳方式？我對React非常陌生，我只是想全力以赴！在標準頁面之間切換非常快，但是當我加載一個項目頁面時，我看到一個白色屏幕閃爍。

編輯：我試圖在我的componentWillMount添加一個承諾要求：

componentWillMount() { 
    const url = this.props.routeParams.project; 
    let promise = new Promise(function(resolve, reject) { 
     let response = Data.find(page => page.name === url); 
     resolve(response); 
    }).then(project => { 
     this.setState({ 
     project: project, 
     },() => { 
     console.log("Project loaded: "); 
     console.log(project.title); 
     }); 
    }); 
    }

然而，我仍看到相同的白色屏幕閃爍和相同的加載速度爲項目頁面。

來源

2017-08-14 Olly

如果數據太大，導致應用程序速度變慢，您想對此做些什麼？ – lilezek

我只是想知道如果有人知道路由或加載內容的更好方式，如果不是那麼那絕對沒問題！ – Olly

您可以在加載數據時發揮淡出效果。順便說一下，你的JSON文件有多大？您公開的示例不夠大，不足以產生影響。 – lilezek

我不認爲它是獲取所有數據並將它們過濾到客戶端的最佳方法，那麼如何在您的（componentWillMount）內部提交promise請求，以便只獲取一個項目（來自路由變量），而您可能會顯示一些裝載器，直到承諾解決。

來源

2017-08-14 11:27:45

感謝您的回答！我試圖實現你的意思，但它似乎沒有任何影響。我已經嘗試了componentDid和WillMount，你會介意檢查我嘗試的承諾，如果它不正確。 – Olly

在不太可能的情況下，任何人都會遇到同樣的問題，我發現標籤中的「target =」屬性導致了這個問題。它甚至沒有打開一個新標籤，只是導致頁面閃爍白色，好像重新加載。

問題不在於頁面，而在於朝向頁面的鏈接。

來源

2017-08-14 16:10:48 Olly

陣營路由器2更有效的路由

回答

相關問題