如何使用React创建一个多页面的应用程序？

Question

我刚刚开始使用React，并使用create-react-app创建了一个新项目。 我已经制作了一个有效的首页。 但是，我想向该应用程序添加另一个页面。 我在主页上有一个按钮，单击后要重定向到另一个页面。 有人可以简单说明一下吗？

我确实知道还有其他问题要问，但是它们似乎不适用于create-react-app ，或者因为我只是从React入手，所以我听不懂。

这是我的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render((
    <Router>
        <Route path = "/" component = {App} />
    </Router>
), document.getElementById('root'));
registerServiceWorker();

Answer 1

您需要使用react-router-dom库。 页面之间的导航真的很容易做出反应。

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, hashHistory, BrowserRouter} from 'react-router-dom'

render((
         <BrowserRouter basename="/" history={hashHistory}>
           {routes()}
         </BrowserRouter>
       ), document.getElementById('app'));

然后在您的主页中，您可以看到类似于下一页的内容：

import React, { Component } from 'react';
import { Switch, Route, BrowserRouter, hashHistory } from 'react-router-dom';
import './MainLayout.css';
import ReportNavComponent from './ReportNavComponent';
import ListOfUsers from '../reports/ListOfUsers/ListOfUsers';
import ListOfProviders from '../reports/ListOfProviders/ListOfProviders';
import ListOfDiagnosis from '../reports/ListOfDiagnosis/ListOfDiagnosis';
import ListOfNewPatients from '../reports/ListOfNewPatients/ListOfNewPatients';
import NumberOfAdmissions from '../reports/NumberOfAdmissions/NumberOfAdmissions';

...

<div className="reportContent">
                        <Switch>
                            <Route path="/ListOfUsers" component={ListOfUsers} />
                            <Route path="/ListOfProviders" component={ListOfProviders} />
                            <Route path="/ListOfDiagnosis" component={ListOfDiagnosis} />
                            <Route path="/ListOfNewPatients" component={ListOfNewPatients} />
                            <Route path="/NumberOfAdmissions" component={NumberOfAdmissions} />
                            <Route component={ListOfUsers} />
                        </Switch>
</div>

Answer 2

reacter-router-dom是进行路由的方法。 但是，如果您刚开始使用react，为什么不从样板项目开始，看看组件和其他实体是如何交互的呢？

您绝对应该看一下davezuko的react-redux入门套件并进行试验。