路由未使用 react-router-dom 呈现

Question

我站的进入场景是

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

连接到site.com/时，会出现欢迎信息和进入按钮。

点击'enter'按钮后，会显示/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;

[About.js]

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

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

[Project.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 的代码并将 exact 添加到 <Route exact path="/home" component={About}/>

Answer 1

您的 Header 组件未接收到 react-router 道具，因此其导航无法正常工作，您可以将 Header 编写为默认路由。此外，您只需要在应用程序顶部使用 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;

路由未使用 react-router-dom 呈现

Routes not rendering with react-router-dom

reactjs

react-router-v4

react-router-dom