当前位置：首页 > React

react项目如何配置路由

2026-03-31 18:24:54React

配置路由的基本步骤

在React项目中配置路由通常使用react-router-dom库。确保项目已安装该库，可以通过以下命令安装：

npm install react-router-dom

使用BrowserRouter包裹应用

在应用的入口文件（如index.js或App.js）中，用BrowserRouter包裹根组件：

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

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

定义路由组件

在需要配置路由的组件中（如App.js），使用Route组件定义路由规则：

import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  );
}

使用Link导航

在组件中使用Link实现导航，避免页面刷新：

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

动态路由参数

通过冒号语法定义动态路由参数，并在组件中通过useParams获取：

<Route path="/user/:id" component={User} />

// User组件中获取参数
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

嵌套路由配置

在父路由组件中定义子路由，子路由的路径会自动拼接父路由路径：

<Route path="/dashboard" component={Dashboard}>
  <Route path="/dashboard/profile" component={Profile} />
  <Route path="/dashboard/settings" component={Settings} />
</Route>

重定向和404处理

使用Redirect实现重定向，Switch中未匹配的路由显示404组件：

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/old" render={() => <Redirect to="/new" />} />
  <Route path="/new" component={NewPage} />
  <Route component={NotFound} />
</Switch>

编程式导航

通过useHistory钩子实现编程式导航：

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

function Button() {
  const history = useHistory();
  return (
    <button onClick={() => history.push('/about')}>
      Go to About
    </button>
  );
}

路由守卫

通过高阶组件或自定义逻辑实现路由守卫，例如检查用户权限：

function PrivateRoute({ component: Component, ...rest }) {
  const isAuthenticated = checkAuth();
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
}

代码分割与懒加载

结合React.lazy和Suspense实现路由组件的懒加载：

react项目如何配置路由

const About = React.lazy(() => import('./components/About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Route path="/about" component={About} />
    </Suspense>
  );
}