Javascript 为什么我能'；t访问url localhost:9000/dummyTable？

我的路由器有问题。我有三个标签。当我在URL中单击它时，我得到了localhost:9000/dummyTable，localhost:9000/dummyChart。但是当我尝试在localhost之后编写

/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')
);

const getTaxtitleSinorder=（）=>{
对于（var i=0；i{
开关（firstTabTitle）{
案例“虚拟表”：
firstTabContent=DummyTable；
firstTabPath=“/”；
打破
案例“虚拟图表”：
firstTabContent=DummyChart；
firstTabPath=“/”；
打破
案例“虚拟列表”：
firstTabContent=DummyList；
firstTabPath=“/”；
打破
}
};
const getSecondTabContent=（secondTabTitle）=>{
开关（第二个选项卡标题）{
案例“虚拟表”：
secondTabContent=DummyTable；
secondTabPath=“/dummyTable”；
打破
案例“虚拟图表”：
secondTabContent=DummyChart；
secondTabPath=“/dummyChart”；
打破
案例“虚拟列表”：
第二个tabcontent=DummyList；
secondTabPath=“/dummyList”；
打破
}
};
const getThirdTabContent=（thirdTabTitle）=>{
开关（第三个选项卡标题）{
案例“虚拟表”：
thirdTabContent=DummyTable；
thirdTabPath=“/dummyTable”；
打破
案例“虚拟图表”：
thirdTabContent=DummyChart；
thirdTabPath=“/dummyChart”；
打破
案例“虚拟列表”：
thirdTabContent=DummyList；
thirdTabPath=“/dummyList”；
打破
}
};
类TabContent扩展了React.Component{
render（）{
返回(
);
}
};
类TabButtons扩展React.Component{
render（）{
getStuditleSinorder（）；
返回(
{firstTabTitle}
{secondTabTitle}
{thirdTabTitle}
);
}
};
类应用程序扩展了React.Component{
render（）{
返回(
);
}
};
ReactDOM.render((
),
document.getElementById（'tab'）
);

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

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

---

当您使用链接组件时，它会使浏览器执行客户端导航。但是当您尝试手动写入url时，您的服务器会收到对“/dummyTable”的请求，并且必须返回一些内容。我的意思是，这可能是服务器端的问题，而不是客户端的问题。您应该将所有浏览器请求重定向到index.html，以便正常工作你在使用NGINX、Apache还是Webpack？我在使用Webpack。你有没有研究过客户端和服务器端的路由（godsenal说了什么）？你必须在后端处理客户端的反应路由，这是一个包罗万象的问题。这种问题在这里和其他地方已经被回答了一百万次，谷歌it