如何在 Reactjs 中使用 react-router-dom 进行路由? [英] How to make using of react-router-dom for routing in Reactjs?

问题描述

我制作了 3 个组件

1)导航栏

2)内容

3)分页

在主页上我想显示所有 3 个组件.我制作了另一个组件 Matchinfo，当我们点击 view stats 按钮时应该会显示它(更多说明请参见屏幕截图).

在 app.js 中，我应该如何使用路由，以便在主页上显示 3 个组件，即 localhost:3000/ 并且当我点击 view stats 时按钮它应该呈现组件 Matchinfo.

在 app.js 中:

import React, { Component } from 'react';从react-router-dom"导入 { Route, NavLink, HashRouter };导入'./App.css';从'./components/navbar'导入导航栏；从'./components/content'导入内容；从'./components/pagination'导入分页；从'./components/matchinfo'导入匹配信息；类 App 扩展组件 {使成为() {返回 (<div className="应用程序"><div className="内容"><Route path="/" component={Navbar, Content, Pagination}/><Route path="/match" component={Matchinfo}/>

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

解决方案

您无需使用路由在 app.js 中调用这些组件.我会要求你创建像 Home 这样的 sepearte 组件(见下面 home.js 的例子).

然后，在 app.js 中调用 Home 组件

import Home from './components/home';<Route path="/" component={Home}/>

在组件下创建home.js

在 Home 组件中调用 Navbar、Content 和 Pagination 组件

import React, {Component} from "react";从'./components/navbar'导入导航栏；从'./components/content'导入内容；从'./components/pagination'导入分页；类 Home 扩展组件 {构造函数(道具){超级(道具)；this.state = {}}componentWillMount() {}使成为() {返回 (<div><导航栏/><内容/><分页/>

)}}导出默认首页；

由于您想在主页中显示导航栏、内容和分页组件，因此请按照上述方式进行操作.这里 Home 是你的父组件，Navbar、Content 和 Pagination 是 Home 的子组件.

一个路由对于一个网页来说就足够了，而且在 React 中大多数时候你会使用子组件.您无需使用路由配置所有组件.

I have made 3 components

1)Navbar

2)Content

3)Pagination

On home page I want to display all 3 components. I have made another component Matchinfo which should get displayed when we click on view stats button (see screenshot for more clarification) .

In app.js how should I make use of Routes so that 3 components will get display on home page i.e localhost:3000/ and when I click on view stats button it should render component Matchinfo.

In app.js :

import React, { Component } from 'react';
import { Route, NavLink, HashRouter } from "react-router-dom";
import './App.css';
import Navbar from './components/navbar';
import Content from './components/content';
import Pagination from './components/pagination';
import Matchinfo from './components/matchinfo';

class App extends Component {
  render() {
    return (
        <div className="App">

          <div className="content">
            <Route path="/" component={Navbar, Content, Pagination}/>
            <Route path="/match" component={Matchinfo}/>
          </div>
        </div>
    );
  }
}

export default App;

解决方案

You no need to call these components in app.js using routes. I would request you to create sepearte component like Home(see example below home.js).

Then, In app.js call Home component

import Home from './components/home'; 

<Route path="/" component={Home}/>

create home.js under components

Call Navbar, Content annd Pagination components in Home component

import React, {Component} from "react";
import Navbar from './components/navbar';
import Content from './components/content';
import Pagination from './components/pagination';

class Home extends Component {
  constructor(props) {
    super(props);        
    this.state = {

    }
  }

  componentWillMount() {

  }

  render() {
    return (
      <div>  
        <Navbar/>
        <Content />
        <Pagination/>
      </div>
    )
  }
}

export default Home;

Since you want to display Navbar, Content annd Pagination components in home page so do it like above way. Here Home is your parent component and Navbar, Content annd Pagination are child components to Home.

One route is enough mostly for one web page and in React most of times you will play with child components. You no need to configure all the components with routes.

这篇关于如何在 Reactjs 中使用 react-router-dom 进行路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！