阵营路由器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更有效的路由

回答

相关问题