【问题标题】:How do you create a multi-page application using React?如何使用 React 创建多页面应用程序?
【发布时间】:2017-08-11 05:10:28
【问题描述】:

我刚刚开始使用 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();

【问题讨论】:

    标签: javascript reactjs react-router


    【解决方案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>
    

    【讨论】:

    • 谢谢!有效!但是,当我不导入 hashHistory 并将其提供给 BrowserRouter 时,它可以工作。显然,hashHistory 不在 react-router-dom 中……我用错了版本吗?
    • 当我尝试从一个页面导航到另一个页面时,url 改变了,但是页面没有改变......我做错了什么?
    【解决方案2】:

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

    您绝对应该看看davezuko's react-redux starter kit 并尝试一下。

    【讨论】:

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