react 如何指定开始页面

指定 React 应用的起始页面

在 React 应用中，起始页面通常由路由配置决定。通过 react-router-dom 可以轻松指定默认加载的页面。

使用 React Router 配置默认路由

在路由配置中，可以通过 path="/" 和 exact 属性指定默认加载的页面：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </Switch>
    </Router>
  );
}

重定向到默认页面

如果需要将根路径重定向到另一个页面，可以使用 Redirect 组件：

import { Redirect } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" render={() => <Redirect to="/home" />} />
        <Route path="/home" component={HomePage} />
      </Switch>
    </Router>
  );
}

动态设置起始页面

在某些情况下，可能需要根据条件动态决定起始页面。可以通过逻辑判断实现：

function App() {
  const isLoggedIn = checkAuth(); // 假设的认证检查

  return (
    <Router>
      <Switch>
        <Route exact path="/" render={() => (
          isLoggedIn ? <Redirect to="/dashboard" /> : <Redirect to="/login" />
        )} />
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/login" component={Login} />
      </Switch>
    </Router>
  );
}

在 Next.js 中配置起始页面

如果使用 Next.js，可以通过 pages/index.js 文件定义起始页面。Next.js 会自动将 index.js 作为根路径的页面：

// pages/index.js
export default function Home() {
  return <div>Welcome to the homepage!</div>;
}

通过以上方法，可以灵活地指定 React 应用的起始页面。