Маршруты не рендерится с реакции-маршрутизатором

Question

Сценарий входа на мой сайт:

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

При подключении к site.com/ появляется приветственное сообщение и кнопка ввода.

После нажатия кнопки ввода введите /homebe show.

И /home имеет Navbar, который имеет два компонента /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, ничего не отображается.

Я не могу найти, где находится ошибка.

Как я могу это исправить?

Спасибо.

---

[решено]

Измените код на код Шубхам Хатри и добавьте точный к <Route exact path="/home" component={About}/>

Answer 1

Ваш компонент заголовка не получает реквизиты реакции-маршрутизатора и, следовательно, его навигация не работает должным образом. Вы можете написать заголовок как маршрут по умолчанию.Также вам нужно использовать 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;