动态路由 React 一次答案

【问题标题】：Dynamically Route React just Once动态路由 React 一次
【发布时间】：2020-09-10 16:00:10
【问题描述】：

我正在使用 React 路由器。正如您在下面看到的，我正在动态创建路由。 Routes 的路径数据来自 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>
   )
 }

}

【问题讨论】：

标签： reactjs routes react-router

【解决方案1】：

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

我还使用了<Link to=""> 而不是<a href="">，所以点击链接时页面不会刷新。

【讨论】：