父组件中的精确路由会阻塞子组件中的路由吗？答案

【问题标题】：Will Exact route in parent component block the routes in Children component?父组件中的精确路由会阻塞子组件中的路由吗？
【发布时间】：2020-09-22 23:32:27
【问题描述】：

我刚刚发现如果我将“精确”添加到父组件中的路由，子组件中的路由将不起作用。如果不给出我的代码，我很难解释它。下面的代码将说明我的意思。

在 App.js 中

class App extends Component {
render() {
    return (
        <div className="App">

            <Link className='Link' to={"/courses"}>Courses </Link>
            <Link className='Link' to={"/users"}>Users </Link>
            <Switch>
                <Route path={"/users"}  component={Users}/>
                <Route path={"/courses"}  component={Courses}/>
                {/*<Route path={"/courses/course/:id/:courseTitle"} exact component={Course}/>*/}
                {/*<Route path={"/courses/:id/:courseTitle"} exact component={Course}/>*/}



            </Switch>
        </div>
    );
}
}
export default App;

如果我将确切添加到路由中，那么子组件中的路由将不起作用。

                    <Route path={"/users"} exact component={Users}/>
                <Route path={"/courses"} exact component={Courses}/>

子组件：

class Courses extends Component {
state = {
    courses: [
        { id: 1, title: 'Angular - The Complete Guide' },
        { id: 2, title: 'Vue - The Complete Guide' },
        { id: 3, title: 'PWA - The Complete Guide' }
    ]
}

render () {
    console.log(this.props.match.url + "/courses/caonima")
    return (

        <div>
            <h1>Amazing Udemy Courses</h1>
            <section className="Courses">
                {
                    this.state.courses.map( course => {
                        console.log(this.props.match.url  + '/' +  course.id + '/' + course.title)
                        return <Link key={course.id} to={{
                            pathname: this.props.match.url + '/' + course.id + '/' + course.title
                        }}>

                        <article className="Course" key={course.id}>{course.title}</article>
                        </Link>
                    } )
                }
            </section>
            <Route path={this.props.match.url +  '/:id/:courseTitle'} exact component={Course}/>
        </div>
    );
}
}
export default Courses;

我只是不知道为什么“确切”会这样。

【问题讨论】：

是的，设计上应该如此。来自exact 的文档 - 如果为 true，则仅当路径与 location.pathname 完全匹配时才会匹配。
你确定当你在<Route>中添加exact，那么你的URL路由器就等于你的<Route>路径？
我想我现在知道它是如何工作的了。谢谢。

标签： reactjs react-router react-router-dom

【解决方案1】：

是的，给定<Route path={"/users"} exact component={Users}/>，那么只有当路径匹配完全“/users”与该路由匹配并呈现时。任何子路由都不能完全匹配，因为父路由不会匹配和渲染。

在这种情况下，将这些“根”路由视为子域可能更容易，您匹配的是路径前缀，即任何以“/users/...”开头的路径都可以匹配并被渲染.对于您想要在完全“/users”上呈现的任何内容，然后将其视为您在该域中的后备路由，没有其他匹配项，因此它呈现根子路由。

Nesting Routes

根路由器

class App extends Component {
  render() {
    return (
      <div className="App">
        <Link className='Link' to={"/courses"}>Courses </Link>
        <Link className='Link' to={"/users"}>Users </Link>
        <Switch>
          <Route path={"/users"}  component={Users}/>
          <Route path={"/courses"}  component={Courses}/>
        </Switch>
      </div>
    );
  }
}

子路线

class Courses extends Component {
  state = {
    courses: [
      { id: 1, title: 'Angular - The Complete Guide' },
      { id: 2, title: 'Vue - The Complete Guide' },
      { id: 3, title: 'PWA - The Complete Guide' }
    ]
  }

  render () {
    console.log(this.props.match.url + "/courses/caonima")
    return (
      <div>
        <h1>Amazing Udemy Courses</h1>
        <section className="Courses">
          {
            this.state.courses.map( course => {
              console.log(this.props.match.url  + '/' +  course.id + '/' + course.title)
              return <Link key={course.id} to={{
                pathname: this.props.match.url + '/' + course.id + '/' + course.title
              }}>
                <article className="Course" key={course.id}>{course.title}</article>
              </Link>
            })
          }
        </section>
        <Route path={this.props.match.url +  '/:id/:courseTitle'} exact component={Course}/>
        <Route path={this.props.match.url} component={CoursesHome} />
      </div>
    );
  }
}

【讨论】：