Маршрутизация с маршрутизаторами, не работающими в реакции JS

Question

Я работаю с маршрутизаторами, предоставляющими ссылки маршрутизации на навигационное меню, но в моем index.js он, кажется, не работает. 1001 *

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';
 import Home from './Home';
  import ContactUs from './ContactUs';

  ReactDOM.render((
  <Router >
    <Route path="/" component={App}>           
       <Route path="Home" component={Home}/>
       <Route path="ContactUs" component={ContactUs}/>
    </Route>
   </Router>
  ), document.getElementById('root'));
   registerServiceWorker();

В моем app.js есть следующие ссылки, которые я использую.реагирует на загрузку с реакцией в функции рендеринга

   <Nav>
      <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
          <DropdownToggle nav caret>
              Dropdown
          </DropdownToggle>
          <DropdownMenu>
                <DropdownItem header>action</DropdownItem>                    
                <DropdownItem divider/>
                <DropdownItem disable> action1</DropdownItem>
          </DropdownMenu>                  
      </Dropdown>
      <NavItem>
           <NavLink>
              <Link to="Home">Home </Link>
           </NavLink>
       </NavItem>
       <NavItem>
          <NavLink>
            <Link to="ContactUs">ContactUs</Link>
          </NavLink>
       {this.props.children}
    </Nav>

тоже не выдает никакой ошибки, верно ли это делает м?Любая помощь будет оценена.

при использовании ссылки отображается на URL, но она не перенаправляет на эту страницу, показывая ее содержание

error

index.js:2178 Warning: You should not use <Route component> and <Route 
 children> in the same route; <Route children> will be ignored
 Warning: Received `true` for a non-boolean attribute `disable`.

 If you want to write it to the DOM, pass a string instead: disable="true" or disable={value.toString()}.
in button (created by DropdownItem)
in DropdownItem (at App.js:39)
in div (created by DropdownMenu)
in DropdownMenu (at App.js:36)
in li (created by Manager)
in Manager (created by Dropdown)
in Dropdown (at App.js:32)
in ul (created by Nav)
in Nav (at App.js:31)
in div (at App.js:26)
in App (created by Route)
in Route (at src/index.js:13)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:12)`

Answer 1

ОБНОВЛЕНИЕ

В последней версии компонент Маршрут не допускает вложенный маршрут, в этом случае работает Switch.Обновленный маршрут будет выглядеть следующим образом:

<Router>
<Switch>
    <Route exact path="/" component={App}>           
       <Route path="/home" component={Home}/>
       <Route path="/contact-us" component={ContactUs}/>
    </Route>
<Switch>
   </Router>

Вы пропустили путь, связывающий свойство NavLink "to", у вас должно работать следующее:

<NavItem>
      <NavLink to="/Home">Home</NavLink>
       </NavItem>
       <NavItem>
       <NavLink to="/ContactUs">ContactUs</NavLink>
</NavItem>

Более того, лучшемаршрут, определенный в конфигурации маршрута, должен быть в нижнем регистре:

<Router>
    <Route path="/" component={App}>           
       <Route path="home" component={Home}/>
       <Route path="contact-us" component={ContactUs}/>
    </Route>
</Router>

Кроме того, в официальных документах https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md говорится:

<NavLink> - это специальная версия <Link>, котораядобавит атрибуты стиля к отображаемому элементу, когда он соответствует текущему URL.

Поэтому нет необходимости помещать <Link> внутри <NavLink>

Answer 2

Вы не используете компонент Link-router-dom Link, из-за которого не работают маршруты маршрутизации.Вы можете сделать что-то вроде этого:

<NavLink>
<Link to='Home'>Home<Link>
</NavLink>