Question

我使用的是去年开始使用React Router 2的项目，这是我目前使用React Router 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;

加载项目页面时，我遇到的加载速度比正常情况慢一点，当然由于Data.json文件中需要查找：

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

这是使用React在服务器端提供更多动态路由的最佳方法吗？我对React很新，我只想努力解决这个问题！在标准页面之间切换非常快，但是当我加载项目页面时，我看到一个白屏闪烁。

编辑：我试图在我的componentWillMount中添加一个promise请求：

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);
      });
    });
  }

然而，我仍然看到相同的白屏闪光和项目页面的加载速度相同。

Answer 1

我不认为这是获取所有数据并在客户端过滤它们的最佳方法，如何在（componentWillMount）中创建承诺请求，以便只获取一个项目（来自路由变量），并且您可以显示一些装载机，直到承诺得到解决。

Answer 2

如果有人偶然遇到同一问题，我发现标签中的“target =”属性导致了这个问题。它甚至没有打开一个新标签，只是让页面闪烁白色就像重新加载一样。

问题不在于页面，而在于页面的链接。

React Router 2更有效的路由

2 个答案: