Как сделать динамический React Router статичным?

Question

Маршрутизатор React был статическим, но в версии 4 он стал динамическим.Это имеет много преимуществ, но в некоторых случаях у вас есть компоненты React, независимые от маршрутизатора.Например, если вы обновляетесь до React Router v4 и не хотите вносить слишком много изменений, или если вы хотите, чтобы ваши компоненты были очищены от любых функциональных возможностей маршрутизатора для повторного использования.

Как вы это делаетечто?

Answer 1

Вот простой способ освободить ваши компоненты от функциональности маршрутизатора.

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/items" component={ItemsRouter} />
    </Switch>
  </Router>
);

const ItemsRouter = (props) => {
  if (props.match.isExact)
    return <ItemsList/>

  return (
    <Route exact path={`${props.match.url}/:itemId`} component={Item} />
  );
};

const Home = () => (
  <div>
    <h2>Home page</h2>
    <Link to="/items">Check out the items</Link>
  </div>
);

const ItemsList = () => (
  <div>
    <h2>List of items</h2>
    <ul>
      <ol><Link to="/items/item1">Item 1</Link></ol>
      <ol><Link to="/items/item2">Item 2</Link></ol>
    </ul>
  </div>
);

const Item = ({match}) => {
  let itemName;

  switch (match.params.itemId) {
    case 'item1':
      itemName = 'Item 1';
      break;
    case 'item2':
      itemName = 'Item 2';
      break;
    default:
      itemName = 'Unknown item';
  }

  return <h2>Details for {`${itemName}`}</h2>
}

export default App;