不使用 react-router-dom 渲染的路由

Question

我的站点进入场景是

/ -> /home
     -> /about
     -> /project

连接site.com/时，有欢迎信息和进入按钮。

点击“进入”按钮后，将显示/home。

/home 的导航栏包含两个组件 /about 和 /project

因此，用户可以单击导航栏菜单来导航另一个页面。

/about 工作正常，但 /project 不工作。它显示空白页。

[App.js]

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from './components/Login';
import Home from './components/Home';
import Project from './components/Project';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route exact path="/" component={Login} />
          <Route path="/home" component={Home} />
        </div>
      </Router>
    );
  }
}

export default App;

[Home.js]

import React, { Component } from 'react';
import Header from '../Header';
import Project from '../Project';
import About from '../About';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Route } from 'react-router-dom'
import {
    Navbar,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink } from 'reactstrap';

class index extends Component {
    render() {
        return (
            <BrowserRouter>
                <div className="home">
                    <Header />
                    <Route path="/home" component={About}/>
                    <Route path="/project" component={Project}/>
                </div>
            </BrowserRouter>
        );
    }
}

export default index;

[Header.js]

import React, { Component } from 'react';
import {
  Navbar,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink } from 'reactstrap';

class index extends Component {
    render() {
        return (
            <div className="navbar_fixed">
            <Navbar color="light" light expand="md">
              <NavbarBrand href="/">Hide</NavbarBrand>
                <Nav className="ml-auto" navbar>
                  <NavItem>
                    <NavLink href="/home">About</NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink href="/project">Project</NavLink>
                  </NavItem>
                </Nav>
            </Navbar>
          </div>
        );
    }
}

export default index;

[关于.js]

import React, { Component } from 'react';
import './index.css';

export default class index extends Component {
  render() {
    return (
      <div>
         Some codes for About.js
      </div>
    );
  }
}

[项目.js]

import React, { Component } from 'react';
import './index.css';

export default class index extends Component {
  render() {
    return (
      <div>
       Some codes for Project.js
      </div>
    );
  }
}

当我进入/home时，它会显示带有导航栏的About.js组件。

但是输入到/project，什么都没有显示。

我找不到错误在哪里。

我该如何解决？

谢谢。

---

[已解决]

将代码更改为 Shubham Khatri 的代码并精确添加到 <Route exact path="/home" component={About}/>

Answer 1

您的 Header 组件没有收到 react-router 道具，因此它的导航无法正常工作，您可以将 Header 编写为默认路由。此外，您只需在 App 顶部使用 BrowserRouter 一次

还有嵌套路由，需要指定相对路由

class index extends Component {
    render() {
        const { match } = this.props;
        return (
                <div className="home">
                    <Route component={Header} />
                    <Switch>
                        <Route path={`${match.path}/project`} component={Project}/>
                        <Route path="/home" component={About}/>
                    </Switch>
                </div>
        );
    }
}

你的 Header.js 将是

import React, { Component } from 'react';
import {
  Navbar,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink } from 'reactstrap';

class index extends Component {
    render() {
        const { match } = this.props;
        return (
            <div className="navbar_fixed">
            <Navbar color="light" light expand="md">
              <NavbarBrand href="/">Hide</NavbarBrand>
                <Nav className="ml-auto" navbar>
                  <NavItem>
                    <NavLink href="/home">About</NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink href={`${match.url}/project`}>Project</NavLink>
                  </NavItem>
                </Nav>
            </Navbar>
          </div>
        );
    }
}

export default index;