javascript - 如何使用 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 库。在 React 中页面之间的导航真的很容易。

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>