Question

我正在使用React Router。如下所示，我正在动态创建路由。路线的路径数据来自api。如果我转到正在创建或刷新的页面，则可以看到404页面的时间为毫秒。如何一次创建路线？

每次刷新页面时，导航栏都会自动渲染。我应该更改路线吗？如果是这样，我应该放在哪里？

class NavigationBar extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
          JSON: []
      };
    }

    componentWillMount() {
        callApi('news')
        .then(data => {
            this.setState({ JSON: data})
        })
    }

 render() {
   return(

       ...(unnecessary code)

       <Router>
         <Switch>

          ...

          {this.state.JSON.map((value) => {
                    return <Route exact path={value.Link} render={(props) => <News header={value.Header} 
                content={value.Content} image={value.Image} />}/>
           })}
         </Switch>
       </Router>
   )
 }

}

Answer 1

我发现的最佳解决方案是在 App.js 中调用项目顶部的 api 并将路由信息作为道具传递给组件。

此外，我使用了 <Link to=""> 而不是 <a href="">，因此在单击链接时页面不会刷新。

动态路由一次反应

1 个答案: