Reactjs-如何重新定向到默认主页

我试图将重定向设置为默认页面，但无法正常工作。正确的方法是什么

const routes = [
    {
        path:"/",
        component:Home,
        extract:"true",
        redirect:"/home"
    },
    {
        path:"/home",
        component:Home
    },
    {
        path:"/service",
        component:Service
    }
];

html:

{routes.map（（route）=>(
))}

假设您使用的是

react-router-dom

，我可以看到一个明确的问题和一些其他问题。您可能只需要做一个更改，但我建议您检查代码的其余部分，以确保最佳路由配置

主要问题：如果希望组件成为要加载的第一个页面，则必须添加重定向到

'/home'

。这是因为在呈现应用程序时，它会将默认路径视为

'/'

<Redirect exact from="/" to="/home" />
  <Route path="/home">
    <Home />
  </Route>

虽然这本身可以解决您的问题，但这里有一个更全面的解决方案，可以比较您当前的代码

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import home from "./Home";
import service from "./Service";
import header from "./Header";

function App () {


    return (
      <div>
        <Router>
        <Header />
        <hr />
          <Switch>
            <Redirect exact from="/" to="/home" />
              <Route path="/home">
                <Home />
              </Route>
              <Route exact path="/service">
                <Service />
              </Route>
            </Switch>
          </Router>
        </div>
      );
    }


export default App;

导入{
BrowserRouter作为路由器，
转换
路线,，
重新使用
}从“反应路由器dom”；
从“/home”导入主页；
从“/service”导入服务；
从“/header”导入标题；
函数应用程序（）{
返回(

);
}
导出默认应用程序；

如您所见，我建议将标题移到

开关

语句之外，然后将重定向从

/

应用到

/home

---

另外，请注意，此配置只是一个示例。它描述了一种情况，即您正在将

应用程序作为一个组件导出，并且不考虑登录授权，因此代码的某些方面可能会有所不同。
您是否尝试过使用斜杠
path=“/home”
？@buzatto来声明路由路径-不走运。页面未加载，出现相同错误。但是当我把“/”而不是
主页
哦，你的
应该在路由器内部，你的路由器链接工作正常。它在移动到标题后工作正常。这是缓存问题。但当刷新页面未加载时，React本质上是为单页应用程序（SPA）设计的。随着它越来越流行，像react router这样的库被创建来模拟具有多个页面，但是您必须记住，实际上只有一个端点。请问，你为什么要刷新页面？因为在普通网站上触发刷新（
onSubmit
，
onClick
，等等）的大多数操作都是通过使用DOM进行管理的，不需要刷新整个页面。在构建之后（目前所有都是静态页面），我被加载到chrome服务器，而刷新页面仍然没有加载。找不到作为
条目获取：/home
如何解决此问题？但是，所有这些都可以在本地主机上正常工作。你能详细说明一下你所说的chrome服务器是什么意思吗？你用的是什么主机平台？我用的是chromes inbuild服务器，“-从这里加载。否则，想象一下我使用express，如何处理它？我个人从未使用过该服务器，所以我不确定配置。但是，您所描述的可能是由于缺少服务器端路由器（express等）造成的。有几种方法可以处理这个问题，但根据我的经验，当使用
HashRouter
或
BrowserRouter
时，通常在后端运行所谓的“通配符路由器”或“服务器路由器”会有所帮助。这是。
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import home from "./Home";
import service from "./Service";
import header from "./Header";

function App () {


    return (
      <div>
        <Router>
        <Header />
        <hr />
          <Switch>
            <Redirect exact from="/" to="/home" />
              <Route path="/home">
                <Home />
              </Route>
              <Route exact path="/service">
                <Service />
              </Route>
            </Switch>
          </Router>
        </div>
      );
    }


export default App;