Как использовать реактив-роутеры в реактивах

Question

Я новичок в Reactjs и хочу использовать маршрутизатор, но он не работает, отображается пустая страница.

Как я могу использовать домашнюю категорию и продукты маршрутизатора. Я поместил код в App.jsx и index.jsx, но показал пустую страницу, как я могу решить эту проблему.

Ниже приведен мой код App.jsx

/* Import statements */
import React, { Component } from 'react';
import { Link, Route, Switch } from 'react-router-dom';

/* Home component */
const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

/* Category component */
const Category = () => (
  <div>
    <h2>Category</h2>
  </div>
)

/* Products component */
const Products = () => (
  <div>
    <h2>Products</h2>
  </div>
)

/* App component */
class App extends React.Component {
  render() {
    return (
      <div>
        <nav className="navbar navbar-light">
          <ul className="nav navbar-nav">

           /* Link components are used for linking to other views */
            <li><Link to="/">Homes</Link></li>
            <li><Link to="/category">Category</Link></li>
            <li><Link to="/products">Products</Link></li>

          </ul>
         </nav>

          /* Route components are rendered if the path prop matches the current URL */
           <Route path="/" component={Home}/>
           <Route path="/category" component={Category}/>
           <Route path="/products" component={Products}/>

      </div>
    )
  }
}

Вот мой код index.jsx

import React from 'react';
import { render } from 'react-dom';

import { App } from './components/App';
import './style.less';

render(<App />, document.getElementById('container'));

Answer 1

Вам необходимо импортировать BrowserRouter и обернуть весь код приложения в этот компонент, чтобы маршруты могли реагировать на изменения URL, поэтому при импорте react-router-dom

import { BrowserRouter, Route, Link } from “react-router-dom”

return (
   <BrowserRouter>
   <div>
    <nav className="navbar navbar-light">
      <ul className="nav navbar-nav">

       /* Link components are used for linking to other views */
        <li><Link to="/">Homes</Link></li>
        <li><Link to="/category">Category</Link></li>
        <li><Link to="/products">Products</Link></li>

      </ul>
     </nav>

      /* Route components are rendered if the path prop matches the current URL */
       <Switch>
       <Route path="/" component={Home}/>
       <Route path="/category" component={Category}/>
       <Route path="/products" component={Products}/>
       </Switch>

  </div>
  </BrowserRouter>
)

Получив рабочий примерпоэтому BrowserRouter будет прослушивать изменения, внесенные в URL, и реагировать на изменения в его Route компонентах, помните, что вам нужно передать каждому Route компоненту свойство, называемое exact={true}, или даже лучше обернуть все ваши Route компоненты.с компонентом Switch, который препятствует отображению всех маршрутов при изменении URL-адреса, с Switch будет отображаться только тот маршрут, который совпадает с точным путем