Question

我在我的应用中使用React v4.2，似乎没有匹配路线的正确路径：

  <Provider store={store}>
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/login" render={(props) => {
                if (isAuthenticated()) {
                  return <Redirect to='/' />;
                } else {
                  return <LoginForm {...props}/>
                }
              }
            } />
            <EnsureLoggedInContainer>
              <Route exact path="/group" render={(props) => {
                debugger;
                return <GroupList {...props}/>
              }
              }/>
              <Route exact path="/group/new" render={(props) => {
                debugger;
                return <GroupList {...props} modal={rr}/>;
              }
              } />
            </EnsureLoggedInContainer>
          </Switch>
        </div>
      </BrowserRouter>
  </Provider>

我在应用中有一些链接，我点击该链接并将客户端重定向到新的URL：

  _onSubmit(values) {
    const { history } = this.props;
    this.props.createGroup(values, ({status}) => history.push('/group'));
  }

我检查props.history.location.pathname和props.match.path的值并且它们不匹配。为什么会这样？为什么正确的路线不匹配？

更新1

EnsureLoggedInContainer的代码：

class EnsureLoggedInContainer extends Component {
  componentDidMount() {
    if (!isAuthenticated()) {
      dispatch(setRedirectUrl(currentURL))
      this.props.history.replace("/login")
    }
  }

  render() {
    if (isAuthenticated()) {
      return(
        <div>
          <AppNavBar />
          <ComponentsNavBar />
          {this.props.children}
        </div>
      );
    } else {
      return <noscript />;
    }
  }
}

export default EnsureLoggedInContainer;

更新2

我将路由器配置代码更改为以下内容：

ReactDOM.render(
  <Provider store={store}>
      <BrowserRouter>
        <div>
          <Switch>
            <Route exact path="/login" render={(props) => {
                if (isAuthenticated()) {
                  return <Redirect to='/' />;
                } else {
                  return <LoginForm {...props}/>
                }
              }
            } />
            <Route exact path="/register" render={(props) => {
                if (isAuthenticated()) {
                  return <Redirect to='/' />;
                } else {
                  return <RegisterForm {...props}/>
                }
              }
            } />
            <EnsureLoggedInContainer>
              <Route exact path="/group" component={GroupList} modal={newGroupModal}/>
              <Route exact path="/group/new" component={GroupList}/>
              <Route component={Home} />
            </EnsureLoggedInContainer>
          </Switch>
        </div>
      </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

并将EnsureLoggedInContainer的最后一行更改为：

export default withRouter(EnsureLoggedInContainer);

但是，我仍然会在Home呈现，并且随机网址与不相关的路线匹配（例如/group/new）

Answer 1

我终于设法使用private route pattern解决了这个问题。

Answer 2

根据文件：

match对象包含有关匹配方式的信息 URL。 match对象包含以下属性：

params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path

isExact - (boolean) true if the entire URL was matched (no trailing characters)

path - (string) The path pattern used to match. Useful for building nested <Route>s

url - (string) The matched portion of the URL. Useful for building nested <Link>s

，而

地点代表应用现在的位置，您希望它去哪里，或即使它在哪里。

因此，如果您说/group/new，location.pathname将为您提供/group/new，而match.path将为您记录的组件定义路径路径匹配

React Router路径错误匹配

2 个答案: