（确保使用 npm 安装 react-router！）

要使用 react-router，请执行以下操作：

1. 创建一个文件路径使用路线，IndexRoute组件定义

2. 注入Router（带有 'r'!）组件作为应用程序的顶级组件，传递路由文件中定义的路由和一种历史类型（hashHistory、browserHistory）

3. 添加{this.props.children}以确保新页面将在那里呈现
4. 使用链接组件更改页面

第 1 步 route.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

/**
 * Import all page components here
 */
import App from './components/App';
import MainPage from './components/MainPage';
import SomePage from './components/SomePage';
import SomeOtherPage from './components/SomeOtherPage';

/**
 * All routes go here.
 * Don't forget to import the components above after adding new route.
 */
export default (
  <Route path="/" component={App}>
    <IndexRoute component={MainPage} />
    <Route path="/some/where" component={SomePage} />
    <Route path="/some/otherpage" component={SomeOtherPage} />
  </Route>
);

第 2 步入口 点（您进行 DOM 注入的地方）

// You can choose your kind of history here (e.g. browserHistory)
import { Router, hashHistory as history } from 'react-router';
// Your routes.js file
import routes from './routes';

ReactDOM.render(
  <Router routes={routes} history={history} />,
  document.getElementById('your-app')
);

Step 3 App 组件（props.children）

在 App 组件的渲染中，添加 {this.props.children}：

render() {
  return (
    <div>
      <header>
        This is my website!
      </header>

      <main>
        {this.props.children}
      </main>

      <footer>
        Your copyright message
      </footer>
    </div>
  );
}

步骤 4 使用链接进行导航

在组件渲染函数返回 JSX 值的任何地方，使用 Link 组件：

import { Link } from 'react-router';
(...)
<Link to="/some/where">Click me</Link>

前言

此答案使用v4+ 中包含的动态路由方法react-router。其他答案可以参考已经被先前使用的“静态路由”的方式放弃了通过react-router。

解决方案

react-router是一个很好的解决方案。您将页面创建为组件，路由器会根据当前 URL 换出页面。换句话说，它会动态地用新页面替换您的原始页面，而不是向服务器请求新页面。

对于网络应用程序，我建议您先阅读以下两件事：

• 完整教程
• 该react-router文档; 它将帮助您更好地了解路由器的工作原理。

一般方法总结：

1 -添加react-router-dom到您的项目：

纱

yarn add react-router-dom

或NPM

npm install react-router-dom

2 -将您的index.js文件更新为：

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render((
  <BrowserRouter>
    <App /> {/* The various pages will be displayed by the `Main` component. */}
  </BrowserRouter>
  ), document.getElementById('root')
);

3 -创建一个Main将根据当前 URL 显示您的页面的组件：

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Home from '../pages/Home';
import Signup from '../pages/Signup';

const Main = () => {
  return (
    <Switch> {/* The Switch decides which component to show based on the current URL.*/}
      <Route exact path='/' component={Home}></Route>
      <Route exact path='/signup' component={Signup}></Route>
    </Switch>
  );
}

export default Main;

4 -Main在App.js文件中添加组件：

function App() {
  return (
    <div className="App">
      <Navbar />
      <Main />
    </div>
  );
}

5 -将Links添加到您的页面。

（您必须使用Linkfromreact-router-dom而不是普通的旧<a>路由器，以便路由器正常工作。）

import { Link } from "react-router-dom";
...
<Link to="/signup">
  <button variant="outlined">
    Sign up
  </button>
</Link>

这是一个广泛的问题，有多种方法可以实现这一点。根据我的经验，我见过很多单页应用程序都有一个入口点文件，例如index.js. 该文件将负责“引导”应用程序，并将成为 webpack 的入口点。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Application from './components/Application';

const root = document.getElementById('someElementIdHere');

ReactDOM.render(
  <Application />,
  root,
);

您的<Application />组件将包含您的应用程序的下一部分。你已经声明你想要不同的页面，这让我相信你正在使用某种路由。这可以与需要在应用程序启动时调用的任何库一起包含在此组件中。react-router, redux, redux-saga,react-devtools想到。这样，你只需要在你的 webpack 配置中添加一个入口点，一切都会在某种意义上滴落下来。

设置路由器后，您可以选择将组件设置为特定的匹配路由。如果您的 URL 为/about，则应该在您使用的任何路由包中创建路由，并使用About.js您需要的任何信息创建一个组件。

你问题的第二部分回答得很好。这是第一部分的答案：如何使用 webpack 输出多个文件：

    entry: {
            outputone: './source/fileone.jsx',
            outputtwo: './source/filetwo.jsx'
            },
    output: {
            path: path.resolve(__dirname, './wwwroot/js/dist'),
            filename: '[name].js'      
            },

这将在目标文件夹中生成 2 个文件：outputone.js 和 outputtwo.js。

还可以使用gatsby一个专用于静态多页应用程序的react框架。