Компонент не может слушать реагирующий маршрутизатор

Question

У меня есть компонент, который постоянно используется в моем спа-салоне. Я хочу, чтобы он знал о моем маршрутизаторе и различных путях, на которых работает мой спа. Есть ли простой способ сделать это, или мне нужно ограничить какое-то решение с избыточным (или чем-то подобным) состоянием, которое всегда прослушивает изменения моего маршрутизатора? Спасибо! Вы можете увидеть ниже пример.

index.jsx:

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { Route, Switch } from 'react-router-dom';
import { history, store } from './redux/store';
import Navigation from './navigation';

const UserReport = () => <h2>User Report</h2>;

const UserPage = () => <h2>User Page</h2>;

const Routes = () => (
  <React.Fragment>
    <Route component={Navigation} />
    <Switch>
      <Route exact path="/users/:startDate" component={UserReport} />
      <Route exact path="/users/:userId" component={UserPage} />
    </Switch>
  </React.Fragment>
);

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Routes />
    </ConnectedRouter>
  </Provider>, document.getElementById('app'),
);

navigation.jsx:

import React from 'react';
import { withRouter } from 'react-router-dom';

const Navigation = (props) => {
  console.log(props.match.path);
  // expected: "/users/:startDate"
  // received: "/"
  return (
    <h2>Navigation</h2>
  );
};

export default withRouter(Navigation);

Answer 1

Поскольку для маршрута Navigation не указан какой-либо путь, он всегда совпадает с любым путем, на котором вы находитесь, но match.path показывает только минимальный путь, необходимый для навигации.Вот почему это всегда /.

Вы можете использовать location.pathname, но оно дает вам совпадающее значение, а не совпадающий путь.

const Navigation = props => {
  console.log(props.location.pathname);
  // prints `/users/1` if you're on https://blah.com/users/1
  // prints `/users/hey` if you're on https://blah.com/users/hey
  return <h2>Navigation</h2>;
};

Не уверен, что вы этого хотите, но еслиВы расширяете то, что именно вы пытаетесь достичь, может быть, я смогу помочь больше.

Более того, ваш второй маршрут к path="/users/:userId" затмевает первый маршрут.Это означает, что невозможно определить, является ли hey в /users/hey startDate или userId.Вы должны ввести отдельный маршрут, например path="/users/page/:userId".

Answer 2

В конечном итоге я решил использовать это обсуждение github-реактивного маршрутизатора .

Пример моей реализации:

index.jsx:

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { Route, Switch } from 'react-router-dom';
import { history, store } from './redux/store';
import Layout from './layout';

const home = () => <h2>Home Page</h2>;
const users = () => <h2>Users</h2>;
const userPage = () => <h2>User Page</h2>;

const layoutRender = component => route => <Layout component={component} route={route} />;

const Routes = () => (
  <Switch>
    <Route exact path="/" component={layoutRender(home)} />
    <Route exact path="/users" component={layoutRender(users)} />
    <Route exact path="/users/:id" component={layoutRender(userPage)} />
  </Switch>
);

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Routes />
    </ConnectedRouter>
  </Provider>, document.getElementById('app'),
);

layout.jsx:

import React from 'react';

const Layout = (props) => {
  const {
    component: Component,
    route,
  } = props;

  return (
    <div>
      <h1>This is the layout</h1>
      <Component route={route} />
    </div>
  );
};

export default Layout;