Javascript 如何使用React创建多页应用程序？

我刚刚开始使用React，并使用

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

从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{Route，BrowserRouter as Router}；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render((
)，document.getElementById（'root'）；
registerServiceWorker（）；

您需要使用react路由器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'));

从“React”导入React；
从'react dom'导入{render}；
从“react Router dom”导入{Router，Route，hashHistory，BrowserRouter}
渲染((
{routes（）}
)，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>

import React，{Component}来自'React'；
从“react router dom”导入{Switch，Route，BrowserRouter，hashHistory}；
导入“/MainLayout.css”；
从“/ReportNavComponent”导入ReportNavComponent；
从“../reports/ListoUsers/ListoUsers”导入ListoUsers；
从“../reports/ListOfProviders/ListOfProviders”导入ListOfProviders；
从“../reports/ListOfDiagnosis/ListOfDiagnosis”导入诊断列表；
从“../reports/ListOfNewPatients/ListOfNewPatients”导入新患者列表；
从“../reports/NumberOfAdmissions/NumberOfAdmissions”导入NumberOfAdmissions；
...

反应器路由器dom

是进行路由的方式。但是，如果您刚刚开始使用react，为什么不从锅炉板项目开始，看看组件和其他实体是如何交互的呢

---

您一定要看看并试用它。

Ruta3是我另外使用的一个路由库。谢谢！成功了！但是，当我不导入hashHistory并将其提供给BrowserRouter时，它就会工作。显然，hashHistory不在dom中。。。我是否使用了错误的版本？当我尝试从一个页面导航到另一个页面时，url会更改，但页面不会更改。。。我做错了什么？