如何在 Reactjs 中使用 react-router-dom 进行路由？

Question

我做了3个组件

1)导航栏

2)内容

3)分页

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

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

在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;

Answer 1

有几种方法可以达到这个结果。第一个是对 home Route 使用 render 方法。另外，使用 Route 的 exact 属性来确保位置完全匹配。

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="/" render={(props) => (
                <React.Fragment>
                      <Navbar/>
                      <Content />
                      <Pagination/>
                <React.Fragment/>
            )} exact/> 
            <Route path="/match" component={Matchinfo} exact/>
          </div>
        </div>
    );
  }
}

export default App;

第二种，例如创建辅助组件Home，并将其包含在您的路由中，如下所示：

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

Answer 2

您无需使用路由在 app.js 中调用这些组件。我会要求您创建像 Home 这样的独立组件（参见下面的示例 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";
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;

既然你想在首页显示Navbar、Content和Pagination组件，那么就按照上面的方式进行。这里的 Home 是您的父组件，Navbar、Content 和 Pagination 是 Home 的子组件。

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

如何在 Reactjs 中使用 react-router-dom 进行路由？

How to make using of react-router-dom for routing in Reactjs?

reactjs

react-router-v4

在组件