如何配置我的webpack.config.js文件以正确导航到其他html页面？

Question

I'm kind of stuck on how to configure webpack.config.js file in order for it to navigate to other html pages. 我有点想如何配置webpack.config.js文件，以便使其导航到其他html页面。 In other words, a multi-page react.js website. 换句话说，是一个多页面的react.js网站。

I want to navigate to About.html upon clicking on About in Main.jsx file. 在Main.jsx文件中单击About ，我想导航到About.html 。 I'm trying to use Routing but I know I'm way off. 我正在尝试使用“路由”，但我知道我已经走了。

I know that the meat of this is in webpack.config.js so I made an attempt below to see if it works by trying to mimic the HtmlWebPackPlugin({}) of index.html , but it doesn't. 我知道它的webpack.config.js是在webpack.config.js因此我在下面尝试通过尝试模仿index.html的HtmlWebPackPlugin({})来查看它是否起作用，但是没有。

Note: I'm not using create-react-app for my project. 注意：我没有为我的项目使用create-react-app 。 I'm just trying things out outside of create-react-app environment and instead, onto other environments. 我只是尝试在create-react-app环境之外，而是在其他环境中尝试其他事情。 I installed Babel and all the other stuff manually. 我手动安装了Babel和所有其他东西。

What am I doing wrong and how can I fix it? 我在做什么错，我该如何解决？

Here's Main.jsx : 这是Main.jsx ：

import React, {Component} from "react";
import ReactDOM from "react-dom";
import {Router, Route} from 'react-router';

class Main extends Component {
    constructor(props) {
        super(props);
        this.goToAbout = this.goToAbout.bind(this);
    }

    goToAbout() {
        console.log("clicked");

        return(
            <Router>
                <Route path={"/About"} component={Main}/>
            </Router>
        )
    }

    render() {
        return (
            <div>
                <button className="button is-primary" onClick={this.goToAbout}>About</button>
            </div>
        );
    }
}

export default Main;

const wrapper = document.getElementById("create-article-form");
wrapper ? ReactDOM.render(<Main/>, wrapper) : false;

// about page (my attempt) 
const aboutWrapper = document.getElementById("about-page"); 
aboutWrapper ? ReactDOM.render(<Main/>, wrapper) : false;

Here's About.html : 这是About.html ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>About Section</h1>
    <div id="about-page"></div>
</body>
</html>

Here's webpack.config.js : 这是webpack.config.js ：

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),

        // my attempt
        new HtmlWebPackPlugin({ 
            template: "./src/About.html",
            filename: "./About.html"
        })
    ]
};

Answer 1

I don't believe this has to do with webpack. 我不认为这与webpack有关。

Instead of 代替

<button className="button is-primary" onClick={this.goToAbout}>About</button>

use: 采用：

<Link to="/About/">About</Link>

If you are trying to link to a page that is not inside of react, you could use something like: 如果您尝试链接到不在react内的页面，则可以使用以下方法：

<a href={`${window.location.origin}/about`} />`

You'll want to use a standard HTML anchor tag with the href set to the location where you want navigate to. 您将要使用标准HTML锚标记，并将href设置为要导航到的位置。

Answer 2

instead of <Route path={"/About"} component={Main}/> use 
<BrowserRouter>
<div>
<Switch>
<Link  path="/about" component="{Main}">
</Switch>
</div>
</BrowserRouter>or

<Link to="/about"></Link> and 

and import {BrowserRouter,Route,Switch,Link} from 'react-router-dom';

Answer 3

A bunch of issues here - this should get you pointed in the right direction: 这里有很多问题-这应该让您指出正确的方向：

Main.jsx Main.jsx

import React from "react";
import {Link, Router, Route, Switch} from 'react-router';  // <- this should be 'react-router-dom' -- upgrade?

const Main = () => (
  <Router>
    <Switch>
      <Route path="/About.html" />
    <Switch>
    <Link to="/About.html">About</Link>
  </Router>
);

ReactDOM.render(<Main/>, document.getElementById("app"));  // <- your React app should be mounted to a single element

webpack.config.js webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: "./src/js/Main",  // <- replace with actual path to Main.jsx
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        })
    ]
};

如何配置我的webpack.config.js文件以正确导航到其他html页面？

问题描述

3 个解决方案

解决方案1
0 2019-01-04 03:09:54

解决方案2
0 2019-01-04 04:22:02

解决方案3
0 2019-01-04 04:33:57

如何配置我的webpack.config.js文件以正确导航到其他html页面？

问题描述

3 个解决方案

解决方案1 0 2019-01-04 03:09:54

解决方案2 0 2019-01-04 04:22:02

解决方案3 0 2019-01-04 04:33:57

解决方案1
0 2019-01-04 03:09:54

解决方案2
0 2019-01-04 04:22:02

解决方案3
0 2019-01-04 04:33:57