如何从 react.js 的一页转到另一个 html 文件

Question

以下是我失败的场景，

如果用户选择第 1 项，页面显示特定类型的图形，而他选择第 2 项，他将看到另一种图形，遗憾的是页面中看不到第二个图形。我创建了另一个 html 页面来将用户引用到该页面，RandomGraph.html，我使用了很多方法，但它不起作用，即使它没有显示简单的 html 文件。我使用的方式是：window.location、window.location.href、a、setTimeout等

这是我在 App.js 中的代码：

import React from 'react';
import {Navbar, Nav, NavItem, MenuItem} from 'react-bootstrap';
import {LinkContainer} from 'react-router-bootstrap';
import './App.css';
import NetworkGraphForm from './NetworkGraphForm';
import Viva from 'vivagraphjs';
import toDot from 'ngraph.todot';
import { Link } from 'react-router-dom';
//import d3 from './index.d.ts';
// import React, { Component } from 'react'
import './App.css'
import NetworkGraphImg from './NetworkGraphImg'

export default class App extends React.Component{
    constructor(props){
        super(props);
        this.toggleAddNetworkGraph = this.toggleAddNetworkGraph.bind(this);
        this.addNetworkGraph = this.addNetworkGraph.bind(this);
    }

    toggleAddNetworkGraph(e){
        e.preventDefault();
        this.props.mappedToggleAddNetworkGraph();
    }

    addNetworkGraph(e){
        e.preventDefault();
        const form = document.getElementById('addNetworkGraphForm');
        console.log('form is')
        console.log(form)
        console.log('networkGraphName',form.networkGraphName.value)
        console.log('networkGraphDesc',form.networkGraphDesc.value)
        console.log('graphType',form.graphType.value)
        if(form.networkGraphName.value !== "" && form.networkGraphDesc.value!==""){
            const data = new FormData();
            if(form.graphType.value=='1'){

            let graph = Viva.Graph.generator().wattsStrogatz(parseInt(form.n.value),parseInt(form.k.value),parseFloat(form.p.value));
            var dotContent = toDot(graph);
            data.append('dotValue',JSON.stringify(dotContent))
            console.log('before appending',form.networkGraphName.value);
            data.append('networkGraphName', form.networkGraphName.value);
            data.append('networkGraphDesc', form.networkGraphDesc.value);

                data.append('attr',JSON.stringify({'graphType': form.graphType.value, 'n':form.n.value, 'K':form.k.value, 'p':form.p.value}))
            }
            if(form.graphType.value=='2'){
                window.location ="randomGraph.html";

                 }

            console.log(data)
            for (var value of data.values()) {
                console.log(value);
            }            // console.log(this.props)
            // console.log(this)
            this.props.mappedAddNetworkGraph(data);
            form.reset();
        }else {
            return;
        }
    }

    render(){
        console.log(this.props.mappedAppState)
        const appState = this.props.mappedAppState
        return(
            <div>
                <Navbar inverse collapseOnSelect className  ="customNav">
                    <Navbar.Header>
                        <Navbar.Brand>
                            <a href ="/#" >MERN Stack NetworkGraph App</a>
                        </Navbar.Brand>
                        <Navbar.Toggle/>
                    </Navbar.Header>
                    <Navbar.Collapse>
                        <Nav>
                            <NavItem componentClass={Link} href="/" to="/" >Home</NavItem>
                        </Nav>
                        <Nav>
                            <NavItem componentClass={Link} href="/networkGraphs" to="/networkGraphs" >Network Graphs</NavItem>
                        </Nav>
                        <Nav pullRight>
                            <NavItem componentClass={Link} href="/" to="/"  onClick={this.toggleAddNetworkGraph}>Add NetworkGraph</NavItem>
                        </Nav>
                    </Navbar.Collapse>



                </Navbar>
                <div className="container">
                    {appState.showAddNetworkGraph &&
                    <NetworkGraphForm addNetworkGraph={this.addNetworkGraph}/>
                    }
                    {/* Each Smaller Components*/}
                    {this.props.children}
                </div>

            </div>
        )
    }
}

我知道它可能是重复的，但我没有找到任何合适的答案， 我感谢您的帮助， 谢谢。

Answer 1

你可以使用window.open

window.open("/randomGraph.html", "_self");

它会重定向您的应用程序，但会破坏您的单页应用程序。 在 React 应用程序中，您不想发出新的 HTTP 请求，但这取决于您