Как мне настроить файл webpack.config.js для правильной навигации по другим html-страницам? - PullRequest
Новая
       1

Как мне настроить файл webpack.config.js для правильной навигации по другим html-страницам?

0 голосов
/ 04 января 2019

Я застрял на том, как настроить файл webpack.config.js, чтобы он мог переходить на другие html-страницы.Другими словами, многостраничный веб-сайт react.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.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: 

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"
        })
    ]
};

Ответы [ 3 ]

0 голосов
/ 04 января 2019 
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';
0 голосов
/ 04 января 2019

Здесь куча вопросов - это должно указать вам правильное направление:

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"
        })
    ]
};
0 голосов
/ 04 января 2019

Не думаю, что это связано с веб-пакетом.

Вместо 

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

используйте: 

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

Если вы пытаетесь установить ссылку настраница, которая не находится внутри реагирования, вы можете использовать что-то вроде: 

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

Вы захотите использовать стандартный HTML-тег привязки с href, установленным в то место, куда вы хотите перейти.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...