根据react js中的URL显示组件

Question

我和我们有不同的组成部分，请与e.t.c联系。但是我不知道如何根据URL显示或更新组件。

Index.js

import React, { Component } from 'react'
import { Navbar } from 'react-bootstrap';
import Home from './components/Header';
import Home from './components/Home';
import Home from './components/About';
import Home from './components/Footer';

export default class Index extends Component {
    render() {
        return (
            <div>
        <Header />
        <Home />  # I want to make this component dynamic, so that I can change it based on the url selection
        <Footer />
            </div>
        )
    }
}

Routes.js

import React, { Component } from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
...
...


class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Router>
          <Switch>
            <Route exact path="/" component={Index} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
            <Route path="/search" component={Search} />
            <Route exact path="/tag/:id" component={Tag} />
            <Route component={Error}/>
          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}

export default App;

Header.js

import React, { Component } from 'react'
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';

export default class Header extends Component {

    state = {
        tags: []
    }

    componentDidMount() {
        const tags = ['First', 'Second', 'Third'];
        this.setState({ tags });
    }

    render() {
        return (
            <div>
                <Navbar variant="dark" expand="lg">
                    <Navbar.Brand href="/">Title</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="ml-auto">
                            <Nav.Link href="/" className="active">Home</Nav.Link>
                            <NavDropdown title="Tags" id="basic-nav-dropdown">
                                {
                                    this.state.tags.map(
                                        tag => <NavDropdown.Item href={ '#/tag/'+tag.id }>{tag.tag_name}</NavDropdown.Item>
                                    )
                                }
                            </NavDropdown>
                            <Nav.Link href="#/about">About me</Nav.Link>
                            <Nav.Link href="#/contact">Contact</Nav.Link>
                            <Nav.Link href="#/search"><i class="fa fa-search" aria-hidden="true"></i></Nav.Link>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </div>
        )
    }
}

Answer 1

如果我正确理解了您想做什么，则可以在要创建路由的位置调用路由器组件。

但是您不应在路由器外部使用链接，因此在这种情况下，您还需要将标头与路由器一起包装。

export default class Index extends Component {
    render() {
        return (
            <div>
            <Router>
              <Header />
              <App /> (In here you can make Routing)
              <Footer />
            </Router>
            </div>
        )
    }
}