组件无法监听 react-router

Question

我有一个组件在我的水疗中心持续使用。我希望它知道我的路由器和我的水疗中心所在的各种路径。有没有一种简单的方法可以做到这一点，或者我是否必须使用一些始终监听我的路由器更改的 redux（或类似的）状态解决方案？谢谢！你可以看下面的例子。

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" 的第二条路线使第一条路线黯然失色。这意味着无法判断 /users/hey 中的 hey 是 startDate 还是 userId。您应该引入一条单独的路线，例如 path="/users/page/:userId".

Answer 2

I ended up using this react-router github discussion as my solution.

我的实施示例：

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;

组件无法监听 react-router

Component cannot listen to react-router

javascript

reactjs

react-router-v4