Как мне настроить файл webpack.config.js для правильного перехода на другие html-страницы?
Я как бы застрял в том, как настроить файл webpack.config.js, чтобы он мог переходить на другие страницы html. Другими словами, многостраничный сайт response.js.
Я хочу перейти к About.html, щелкнув About в файле Main.jsx. Я пытаюсь использовать маршрутизацию, но знаю, что ошибаюсь.
Я знаю, что основная часть этого находится в webpack.config.js, поэтому я предпринял попытку ниже, чтобы увидеть, работает ли он, пытаясь имитировать HtmlWebPackPlugin({}) из 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.info("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:
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"
})
]
};
@ ic3b3rg Как я уже упоминал выше, я хочу перенаправить в файл About.html, а не на другой компонент response.js
хорошо, попробуйте удалить компонент и изменить путь к path = "/About.html"
о, подождите минутку - вы не хотите возвращать DOM из вашего события onclick - ваш маршрутизатор должен войти в ваш render, а button, который у вас есть, должен быть Link
@ ic3b3rg ах, хорошо, я понимаю, что ты имеешь в виду. Не могли бы вы привести мне пример, использующий мой сценарий? Поскольку <Route/> должен принимать атрибут component, но в моем случае я не хочу, чтобы он перенаправлялся на другой компонент js.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я не верю, что это связано с веб-пакетом.
Вместо
<button className = "button is-primary" onClick = {this.goToAbout}>About</button>
использовать:
<Link to = "/About/">About</Link>
Если вы пытаетесь создать ссылку на страницу, которая не находится внутри response, вы можете использовать что-то вроде:
<a href = {`${window.location.origin}/about`} />`
Вы захотите использовать стандартный тег привязки HTML с href, установленным в то место, куда вы хотите перейти.
хм, хорошо, поэтому с <a href = { $ {window.location.origin} / about} /> я пытаюсь указать путь к файлу для About.html, но он не распознает его.
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';
Здесь куча проблем - это должно указать вам в правильном направлении:
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 - в вашем маршруте «О программе» используйте компонент для
About, т.е. заменитеAbout.htmlна компонент