【问题标题】：Nested Routing In React Router Dom issuesReact Router Dom 中的嵌套路由问题
【发布时间】：2020-10-14 08:31:58
【问题描述】：

我正在使用来自https://reacttraining.com/react-router/web/example/nesting 的示例，但我将其创建为一个单独的组件。我有 Home 和 Topics 以及 Errorpage 组件。当我单击 Foo、Bar 或 Baz 时，它会一直路由到错误页面，但我无法显示要显示的路由参数值。有什么我错过的吗？非常感谢，提前。这就是它的样子；

//App.js

import React from 'react'
import style from './App.module.css';
import {Switch, Route, NavLink } from 'react-router-dom'
import Home from './components/Home'
import Error from './components/Errorpage'
import Topics from './components/Topics'

const App = () => {
 return (
    <div className={style.App}>
      <NavLink exact to="/" activeStyle={{fontWeight:'bold',color:'blue'}}>Home</NavLink>
      <NavLink exact to="/topics" activeStyle={{fontWeight:'bold',color:'blue'}}>More Topics</NavLink>

      <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/topics" component={Topics} /> 
        <Route component={Error} />
      </Switch>    
    </div>
  )
}

export default App

//Home.js

import React,{useState} from 'react'
import { Redirect } from "react-router-dom";

const Home = () => {
  
    return (
        <div>
            <h1>Home Page</h1>
        </div>
    )
}

export default Home

//Errorpage.js

import React from 'react'

const Errorpage = props => {
    return (
        <div>
            <h1 style={{color:'red'}}>Opps. Sorry, page not found!</h1>
        </div>
    )
}

export default Errorpage

//Topics.js

import React from 'react'
import {Switch,Route,Link,useParams,useRouteMatch} from "react-router-dom"

const Topics = props => {
    let { path, url } = useRouteMatch();
    return (
        <div>
         <h2>Topics</h2>
          <ul style={{listStyleType:'none'}}>
            <li>
              <Link to={`${url}/foo`}>Foo</Link>
            </li>
            <li>
              <Link to={`${url}/bar`}>Bar</Link>
            </li>
            <li>
              <Link to={`${url}/baz`}>Baz</Link>
            </li>
          </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`}>
          <Topic />
        </Route>
      </Switch>
        </div>
    )
}

function Topic() {
  let { topicId } = useParams();
  return (
    <div>
      <h3>{topicId}</h3>
    </div>
  );
}


export default Topics

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

问题

是的，您遗漏了一个很小但非常重要的细节。 exact 属性与定义的路径完全匹配。一旦你点击一个嵌套的子路由，你就不再匹配根路径完全。

解决方案

您不能在包含嵌套路由的路由上指定 exact 属性。如果您仔细查看那个演示，您会在他们的 "/topics" 路径上看到相同的内容。

const App = () => {
 return (
    <div className={style.App}>
      <NavLink exact to="/" activeStyle={{fontWeight:'bold',color:'blue'}}>Home</NavLink>
      <NavLink exact to="/topics" activeStyle={{fontWeight:'bold',color:'blue'}}>More Topics</NavLink>

      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/topics" component={Topics} /> 
        <Route component={Error} />
      </Switch>    
    </div>
  )
}

【讨论】：