Question

我遇到了react-router的问题。我有三个标签。当我在URL中单击它时，我有localhost：9000 / dummyTable，localhost：9000 / dummyChart。但是当我尝试在localhost之后编写Cannot GET /dummyTable时，我遇到错误/dummyTable。我错过了什么？任何人都可以帮我解决这个问题吗？

const getTabsTitlesInOrder = () => {
    for(var i = 0; i <tabsJson.tabs.length; i ++){
        switch(tabsJson.tabs[i].order){
            case 0:
                firstTabTitle = tabsJson.tabs[i].title;
                getFirstTabContent(firstTabTitle);
                break;
            case 1:
                secondTabTitle = tabsJson.tabs[i].title;
                getSecondTabContent(secondTabTitle);
                break;
            case 2:
                thirdTabTitle = tabsJson.tabs[i].title;
                getThirdTabContent(thirdTabTitle);
                break;
        }
    }
};

const getFirstTabContent = (firstTabTitle) => {
    switch (firstTabTitle) {
        case "Dummy Table":
            firstTabContent = DummyTable;
            firstTabPath = "/";
            break;
        case "Dummy Chart":
            firstTabContent = DummyChart;
            firstTabPath = "/";
            break;
        case "Dummy List":
            firstTabContent = DummyList;
            firstTabPath = "/";
            break;
    }
};

const getSecondTabContent = (secondTabTitle) => {
    switch (secondTabTitle) {
        case "Dummy Table":
            secondTabContent = DummyTable;
            secondTabPath = "/dummyTable";
            break;
        case "Dummy Chart":
            secondTabContent = DummyChart;
            secondTabPath = "/dummyChart";
            break;
        case "Dummy List":
            secondTabContent = DummyList;
            secondTabPath = "/dummyList";
            break;
    }
};

const getThirdTabContent = (thirdTabTitle) => {
    switch (thirdTabTitle) {
        case "Dummy Table":
            thirdTabContent = DummyTable;
            thirdTabPath = "/dummyTable";
            break;
        case "Dummy Chart":
            thirdTabContent = DummyChart;
            thirdTabPath = "/dummyChart";
            break;
        case "Dummy List":
            thirdTabContent = DummyList;
            thirdTabPath = "/dummyList";
            break;
    }
};

class TabContent extends React.Component{
    render() {
        return(
            <Switch>
                <Route exact path={firstTabPath} component={firstTabContent}/>
                <Route path={secondTabPath} component={secondTabContent}/>
                <Route path={thirdTabPath} component={thirdTabContent}/>
            </Switch>
        );
    }
};

class TabButtons extends React.Component{
    render() { 
        getTabsTitlesInOrder();
        return(
            <div className="tabTitleWrapper">
                <div className="tabTitle">
                    <Link className="tabLink" to={firstTabPath}>
                        {firstTabTitle}
                    </Link>
                </div>
                <div className="tabTitle">
                    <Link className="tabLink" to={secondTabPath}>
                        {secondTabTitle}
                    </Link>
                </div>
                <div className="tabTitle">
                    <Link className="tabLink" to={thirdTabPath}>
                        {thirdTabTitle}
                    </Link>
                </div>
            </div>
        );
    }
};

class App extends React.Component{
    render() { 
        return(
            <div>
                <TabButtons />
                <TabContent />
            </div>
        );
    }
};

ReactDOM.render((
    <BrowserRouter>
        <App />
    </BrowserRouter>),
    document.getElementById('tab')
);

Answer 1

要解决webpack中的路由问题，您需要将其添加到配置对象中：

devServer: {
  port: 9000,
  historyApiFallback: {
    index: 'index.html'
  }
}

为什么我无法访问url localhost：9000 / dummyTable？

1 个答案: