反应路由多个组件 - Javascript

React是一个流行的JavaScript库，它使前端开发更加高效。React Router是React的官方路由器，它允许您轻松的为React应用程序添加导航和路由功能。

在React中，一个组件通常只是一个单独的JavaScript文件，但有时我们需要多个组件来协同工作以完成一个任务。本文将介绍如何使用React Router来反应路由多个组件。

初步设定

为了能够使用React Router，您需要在项目中安装它。可以使用npm进行安装：

$ npm install react-router-dom

安装后，您需要导入React Router和需要使用的组件。以下是一个示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './home';
import About from './about';
import Contact from './contact';

在上面的代码中，我们导入了React Router以及需要用到的组件。

现在，我们需要创建一个Router组件，并在其中定义路由规则。

<Router>
  <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </Switch>
</Router>

在上面的代码片段中，我们定义了三条路由规则：

• / 对应 Home 组件
• /about 对应 About 组件
• /contact 对应 Contact 组件

当用户访问这些URL时，路由器将根据URL的路径自动选择相应的组件进行显示。

使用多个组件

有时候，单个组件可能无法满足我们的需求。例如，我们需要在 About 组件中显示一个侧边栏，而侧边栏是一个单独的组件。

在这种情况下，我们需要在 About 组件中引入侧边栏组件：

import React from 'react';
import Sidebar from './sidebar';

class About extends React.Component {
  render() {
    return (
      <div>
        <Sidebar />
        <h1>About Us</h1>
        <p>We are a small company that specializes in...</p>
      </div>
    );
  }
}

export default About;

然后我们可以在路由器中使用 About 组件：

<Route path="/about" component={About} />

当用户访问 /about 路径时，路由器将自动显示 About 组件及其中包含的 Sidebar 组件。

使用嵌套路由

有时候，一个组件中包含多个子组件，而这些子组件又需要自己的路由规则，这时我们需要使用嵌套路由。

例如，我们可能有这样一个结构：

.
├── App.js
├── components        
│   ├── Main.js
│   ├── Sidebar.js
│   └── Footer.js
├── pages
│   ├── Home.js
│   ├── About.js
│   └── Contact.js
└── index.js

其中，Main 组件包含 Sidebar 和 Footer 组件，而这些子组件又需要使用自己的路由规则。我们可以在 Main 组件中定义子路由规则：

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

class Main extends React.Component {
  render() {
    return (
      <div>
        <Sidebar />

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>

        <Footer />
      </div>
    );
  }
}

export default Main;

然后在 App 组件中使用嵌套路由：

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Main from './components/Main';

class App extends React.Component {
  render() {
    return (
      <Router>
        <Route path="/" component={Main} />
      </Router>
    );
  }
}

export default App;

当用户访问这些URL时，路由器将根据URL的路径自动选择相应的组件进行显示，有多层路由嵌套也可以应对。

总的来说，将多个组件嵌套在路由器内的过程并不复杂，但需要仔细考虑组件层次结构和路由规则。在设计路由时，请务必考虑其层次结构和模块化。