使用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;

[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的代码，并将其精确添加到<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;