Javascript 从App.js导航到Places.js

我对React是个新手。我经常玩它。现在我想从App.js导航到Places.js。我同意可以使用React路由器来完成，但我还不能成功地解决这个问题。在这方面我需要帮助。说到这里，我尝试了一些使用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>

---

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

来定义您的路线。您必须先导入

react路由器

在app.js文件中，您必须剪切另一个文件（例如grid.js）中的内容“应用程序”将是应用程序的主容器 然后，您将创建一个文件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>
);

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

并且，在函数

ReactDOM.render

中，定义您的路由：

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

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

ReactDOM.render(
，document.querySelector（'.container'）；

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

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

从“React”导入React；
从“react Router”导入{Router，Route，IndexRoute，browserHistory}；
从'react dom'导入{render}；
从“../Places.js”导入地点；
渲染(
，document.getElementById（'app'）
);

---

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

是。路由器就是为了这个目的。您必须注册您的路由并在逻辑中给出它。您的代码试图使用react router的位置在哪里？可能是重复的

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