Javascript 转发刷新或手动输入时不加载响应路由器内容

我是React新手，熟悉React路由器。我将应用程序分为两个主要路径，因为每个路径使用不同的样式：启动路径是用户首次进入时的路径，其中包含启动屏幕、登录和注册页面；用户登录后将显示菜单路径。目前我正在研究飞溅路线，但遇到了一些问题。Splashscreen包含一个进入登录屏幕的按钮。当我点击按钮时，它工作正常，但如果我刷新登录页面，返回垃圾邮件屏幕并转发，或者手动输入地址，页面将变为空白。我尝试使用HashRouter，它很管用，但有人建议它应该只在Dev服务器上使用，而不应该在生产环境中使用。我不使用Webpack，因此无法使

historyApiFallback:true

，并且应用程序正在

localhost

上运行。 以下是我目前的代码：

App.js：

import React from 'react';
import './App.css';
import SplashTemplate from './component/Template/SplashTemplate';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="App">
      <Switch>
        <Route path="/" exact={true}>
          <SplashTemplate/>
        </Route>
      </Switch>
      </div>
    </Router>
  );
}

export default App;

并将

SplashTemplate.js

更改为：

class SplashTemplate extends Component {
    render(){
        return(
            <div className="background">{this.props.children}</div>
        );
    };
}

类模板扩展组件{
render（）{
返回(
{this.props.children}
);
};
}

---

这似乎适用于初始路径，但现在问题出现在菜单路径中，如果路径是手动输入的(http://localhost:3000/mainmenu)菜单的模板没有显示，但是启动模板显示了。我做错了什么？

你的问题出在

App.js

路由中。仅当精确路径为

/

时，它才渲染

SplashTemplate

组件（其中包含其他路由）。因此，如果您使用

/login

启动页面，

SplashTemplate

不会被渲染（实际上，没有渲染），并且没有路由器为您的其他路由提供服务

---

我建议将路由移动到单个组件中，或者更改

App.js

路由逻辑，以便它仍然显示

/login

和其他所需路由的

SplashTemplate

。

因此，在仔细研究并遵循这两种方法之后，我能够想出一个解决方案。首先，将所有路由移动到一个单独的文件调用

Route.js

，并将其导入

App.js

。由于我们需要将两条路径分开，我们将把路由放在两个不同的函数中，并在如下的主函数中调用它们：

Route.js

...
function LayoutRoute() {
    return (
      <Switch>
        <Route path="/splash" component={SplashLayout} />
        <Route path="/main" component={MainLayout} />
        <Route path="/" component={NotFound} />
      </Switch>
    );
  }

function SplashLayout() {
    return (
      <SplashTemplate>
            <Route path="/splash/splash" exact component={Splash} />
            <Route path="/splash/login" exact component={LoginForm} />
            <Route path="/splash/register" exact component={RegistrationForm} />
            <Redirect from="/splash" to="/splash/splash" exact />
            <Route />
      </SplashTemplate>
    );
  }

function MainLayout() {
    return (
        <MainTemplate>
            <Route path="/main/menu" exact component={MainMenu} />
            <Redirect from="/main" to="/main/menu" exact />
            <Route />
        </MainTemplate>
        
    );
}

const NotFound = () => <h1>Not Found</h1>;

export default LayoutRoute;

class SplashTemplate extends Component {
    render(){
        return(
            <div className="background">{this.props.children}</div>
        );
    };
}

和模板文件：

SplashTemplate.js

...
function LayoutRoute() {
    return (
      <Switch>
        <Route path="/splash" component={SplashLayout} />
        <Route path="/main" component={MainLayout} />
        <Route path="/" component={NotFound} />
      </Switch>
    );
  }

function SplashLayout() {
    return (
      <SplashTemplate>
            <Route path="/splash/splash" exact component={Splash} />
            <Route path="/splash/login" exact component={LoginForm} />
            <Route path="/splash/register" exact component={RegistrationForm} />
            <Redirect from="/splash" to="/splash/splash" exact />
            <Route />
      </SplashTemplate>
    );
  }

function MainLayout() {
    return (
        <MainTemplate>
            <Route path="/main/menu" exact component={MainMenu} />
            <Redirect from="/main" to="/main/menu" exact />
            <Route />
        </MainTemplate>
        
    );
}

const NotFound = () => <h1>Not Found</h1>;

export default LayoutRoute;

class SplashTemplate extends Component {
    render(){
        return(
            <div className="background">{this.props.children}</div>
        );
    };
}

类模板扩展组件{
render（）{
返回(
{this.props.children}
);
};
}

---

这有助于为所需的网站/应用程序的每个路径实现单独的布局，并确保在手动输入或刷新时呈现页面。

关于如何完成这些任务有何建议？对于将路由移动到单个组件，这意味着我在一个文件中定义所有路由，并将其导入到

App.js

？对于更改路由逻辑，我不确定显示其他所需路由的

SplashTemplate

是什么意思？作为短期解决方案，用以下内容替换

App.js

交换机中的代码：

应该足以解决您的问题。它将确保始终显示

SplashTemplate

，然后

SplashTemplate

将能够显示正确的组件感谢您的回答，但由于您之前的回答，我找到了另一种似乎有效的方法。现在我面临着一个类似的问题，我已经更新了这个问题。您可以看一看吗？您的解决方案将始终显示

SplashTemplate

组件，因此您将始终看到背景。路由应该是

Switch

的直接子级，否则您可能会出现不必要的行为。

function App() {
  return (
    <Router>
      <LayoutRoute></LayoutRoute>
    </Router>
  );
}

class SplashTemplate extends Component {
    render(){
        return(
            <div className="background">{this.props.children}</div>
        );
    };
}