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

问题描述：

我刚刚开始使用React，并使用create-react-app创建了一个新项目。我制作了一个可以工作的主页。但是，我想为此应用程序添加另一个页面。我在主页上有一个按钮，点击时我想重定向到另一个页面。有人可以给一个简单的解释来做到这一点？如何使用React创建多页面应用程序？

我知道还有其他问题提出这个问题，但他们似乎不适用于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();

答

您需要使用反应路由器-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>

谢谢！有效！但是，它不起作用，当我不导入hashHistory并将其提供给BrowserRouter。显然，hashHistory不在react-router-dom中...我使用的是错误的版本吗？ – u8y7541

当我尝试从一个页面导航到另一个页面时，URL更改，但页面不更改...我做错了什么？ – u8y7541

答

reacter-router-dom是去了解路由的方式。但是如果你刚开始采取反应，为什么不从一个锅炉板项目开始，看看组件和其他实体如何相互作用？

你一定要看看davezuko's react-redux starter kit并试验一下。

Ruta3是我另外使用的另一个路由库。 –

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

相关推荐