如何使动态React Router静态化？

Question

React Router以前是静态的，但是在版本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;