react 怎么写路由组件

你可以使用 React Router 来实现路由组件。在你的应用程序中，你需要使用 BrowserRouter 来包裹整个应用，然后使用 Route 组件来定义不同的路由。例如：

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

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

function Home() {
  return <h1>首页</h1>;
}

function About() {
  return <h1>关于我们</h1>;
}

在上面的例子中，我们定义了两个路由：'/' 和 '/about'，并将它们分别对应到 Home 和 About 组件上。接下来，当用户访问 '/' 或 '/about' 时，React Router 将会自动加载对应的组件。

相关问题

react动态生成路由组件怎么写

React动态生成路由组件的写法很简单，可以使用React的`React.lazy()` API来动态加载组件，然后使用`React Router`的`Route`组件将组件包裹起来。例如： ```
const MyComponent = React.lazy(() => import('./MyComponent'));<Router>
<Route path="/my-component" component={MyComponent} />
</Router>

react类组件路由跳转

在 React 类组件中，可以使用路由库（如 react-router-dom）来实现路由跳转。以下是一种常见的方法：

1. 首先，确保你已经安装并配置了路由库，比如 react-router-dom。

2. 在你的路由配置中，使用 `<Route>` 组件指定路径和要渲染的组件。

3. 在类组件中，可以通过 `this.props.history.push()` 方法来进行路由跳转。例如：

import React from 'react';

class Home extends React.Component {
  handleButtonClick = () => {
    // 跳转到另一个路径
    this.props.history.push('/detail');
  };

  render() {
    return (
      <div>
        <h1>Home Page</h1>
        <button onClick={this.handleButtonClick}>Go to Detail</button>
      </div>
    );
  }
}

export default Home;

在上面的例子中，当点击按钮时，会调用 `handleButtonClick` 方法，并使用 `this.props.history.push('/detail')` 进行路由跳转到 "/detail" 路径。

4. 在路由组件中，可以通过 `<Link>` 组件来实现路由跳转。例如：

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

class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>Home Page</h1>
        <Link to="/detail">Go to Detail</Link>
      </div>
    );
  }
}

export default Home;

在上面的例子中，使用 `<Link>` 组件将文字 "Go to Detail" 包裹起来，并设置 `to` 属性为目标路径 "/detail"，点击文字时会进行路由跳转。

这样，你就可以在 React 类组件中实现路由跳转了。根据你的实际需求，可以使用 `this.props.history.push()` 或 `<Link>` 组件来进行跳转。记得在路由组件中包裹 `<Router>` 组件，以便在整个应用中进行路由管理。