Question

我有点想如何配置webpack.config.js文件以使其导航到其他html页面。换句话说，就是一个多页面的react.js网站。

我想在About.html文件中单击About时导航到Main.jsx。我正在尝试使用“路由”，但我知道我还有路要走。

我知道它的内容在webpack.config.js中，因此我在下面尝试通过尝试模仿HtmlWebPackPlugin({})的{{1}}来查看它是否有效，但它没有

注意：我的项目没有使用index.html。我只是在create-react-app环境之外尝试尝试，而在其他环境中尝试尝试。我手动安装了create-react-app和所有其他东西。

我在做什么错，我该如何解决？

这里是Babel：

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;：

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>：

webpack.config.js

Answer 1

我不认为这与webpack有关。

代替

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

使用：

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

如果您尝试链接到不在react内的页面，则可以使用以下内容：

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

您将要使用标准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

这里有很多问题-这应该让您指出正确的方向：

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

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 个答案: