Question

我无法使NoMatch组件正常工作，例如，如果我浏览到/bla，它将加载我的bags页面，而转到bags/bag1/ssdds，它将加载NoMatch组件。

当我转到错误的链接时，如何显示NoMatch组件？

我正在使用react-router-dom v4

 <Router history={browserHistory}>
            <Wrap>
            <GlobalStyle whiteColor />
            {!this.props.cookieAccepted && <CookiePopUp />}
            <Header e={e} p={p} categories={categories} subCategories={subCategories} language={language} />
              {/* <BreadCrumbs /> */}
              <Route style={{ flex: 1 }} render={({ location }) =>
                <TransitionGroup>
                  <CSSTransition
                    key={location.key}
                    timeout={500}
                    classNames="page"
                    mountOnEnter={true}
                    unmountOnExit={true}
                  >
                    <MainWrap>
                      <Switch location={location}>
                        <Route exact path="/" render={props =>
                          <Home e={e} p={p}
                            categories={categories}
                            subCategories={subCategories}
                            products={products}
                            language={language}
                            {...props} />}
                          />
                        <Route exact path="/delivery" component={Delivery}/>
                        <Route exact path="/dostawa" component={Delivery}/>
                        <Route exact path="/terms" component={Terms}/>
                        <Route exact path="/privacy" component={Privacy}/>
                        <Route exact path="/about" component={About}/>
                        <Route exact path="/:catId" render={props => <ProductsList  e={e} p={p} categories={categories} subCategories={subCategories} products={products} showAlert={showAlert} language={language} {...props} />} />
                        <Route exact path="/:catId/:productId" render={props => <Product categories={categories} subCategories={subCategories} products={products} showAlert={showAlert} language={language} {...props} />} />
                        <Route component={NoMatch} />
                      </Switch>
                    </MainWrap>
                  </CSSTransition>
                </TransitionGroup>
              } />
     <Query query={CATEGORIES_QUERY}>
            {({ loading, error, data }) => {
              if (loading) return <div>Fetching</div>
              if (error) return <div>Error</div>
              {console.log('blaasdl')}
              const res = data.categories
              {console.log(res)}
              this.props.fetchCategories(res)
              return (
                null
              //   <div>
              //  {res.map(res => res.name)}

              //   </div>
              )
            }}
          </Query>
          <Query query={PRODUCTS_QUERY}>
            {({ loading, error, data }) => {
              if (loading) return <div>Fetching</div>
              if (error) return <div>Error</div>
              {console.log('blaasdl')}
              const res = data.products
              {console.log(res)}
              this.props.fetchProducts(res)
              return (
                null
              //   <div>
              //  {res.map(res => res.name)}

              //   </div>
              )
            }}
          </Query>
              <Footer />
            </Wrap>
          </Router>

Answer 1

在您上一个Route

中做一些小的更改

替换为您的<Route component={NoMatch} />

通过

<Route path="/not-found" component={NoMatch} />
<Redirect to="/not-found" />`

更新

这是一种使用react-router-dom

创建路由的方法

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import "./index.css";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

App.js

import React, { Component } from "react";
import { Route, Redirect, Switch } from "react-router-dom";
import "./App.css";

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <main>
          <Link to="/some-thing"></Link>
          <Link to="/some-thing-1"></Link>
          <Link to="/some-thing-2"></Link>        
            <Switch>
                <Route exact path="/some-thing" component={SomeThing} />
                <Route exact path="/some-thing-1" component={SomeThing} />
                <Route exact path="/some-thing-2" component={SomeThing} />
                <Route path="/not-found" component={NotMatch} />
                <Redirect to="/not-found" />
            </Switch>
        </main>
      </React.Fragment>
    );
  }
}

export default App;

react-router-dom noMatch无法正常工作

1 个答案: