从 App.js 导航到 Places.js答案

【问题标题】：Navigating from App.js to Places.js从 App.js 导航到 Places.js
【发布时间】：2018-02-28 10:15:39
【问题描述】：

我是 React 的新手。我正在玩它。现在我想从 App.js 导航到 Places.js 。我同意它可以使用 React-router 完成，但我还不能成功地弄清楚这一点。我需要这方面的帮助。话虽如此，我尝试了一些使用 HashRouter、Route 和 Navlink 的组合，但所有的努力都是徒劳的。

这是我的 App.js

    import {Link,Router} from 'react-router-dom';
    import Places from './Places';
    import React, { Component } from "react";
    import { Card} from 'semantic-ui-react';


    class App extends Component {

    render() {

    return (
    <Router>
      <div className ="ui four stackable two column grid">

     <div className="column">
       <Card
         as = {Link} to = '/Places'
         header='Places'
         description='Click here to get list of places.'
        />
     </div>

...

     </div>
    </Router>

      );
    }
   }

这是我的 Places.js

 import { Card} from 'semantic-ui-react';
 import axios from 'axios';

  export default class Places extends React.Component {

...

基本上我有 4 个 UI 卡的 App.js。当我单击每个卡时，它应该加载相应 js 文件的内容。这是否符合 SPA 的条件？

【问题讨论】：

是的。路由器就是为了这个目的。你必须注册你的路线并在你的逻辑中给出它
你的代码在哪里尝试使用反应路由器？
可能与stackoverflow.com/questions/31079081/…重复

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

定义您的路线。你必须先导入react-router。

在您的文件 app.js 中，您必须将内容剪切到另一个文件（例如 grid.js）中。 'App' 将是您的应用程序的主要容器然后您将创建一个文件 routes.js 并描述您的路线：

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from './components/app';
import Grid from './components/Grid';
import Places from './components/Places';

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Grid} />
    <Route path="places" component={Places} />
  </Route>
);

在这里，IndexRoute，您说您的默认路由将加载“网格”，因此卡片列表。

然后，在 app.js 文件中，在渲染函数 {this.props.children} 中写入要显示元素“网格”和“位置”的位置。

最后，在您的文件“index.js”中，您将导入您的路由和路由器：

import { Router, browserHistory } from 'react-router';
import routes from './routes';

并且，在函数 ReactDOM.render 中，定义您的路线：

ReactDOM.render(
  <Router history={browserHistory} routes={routes} />
, document.querySelector('.container'));

【讨论】：

【解决方案2】：

您可以通过将路由保存在单独的文件中来处理路由，并从那里处理组件渲染。

import React from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import {render} from 'react-dom';
import Places from '../Places.js';

render(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
     <Route path='/Places' component={Places}></Route>
    </Route>
  </Router>, document.getElementById('app')
);

当您导航到“/Places”路线时，它将呈现 Places 组件。

【讨论】：