原理解析：
1、将可能匹配不到的Route 的path属性写成动态的 path="/:id"
2、并且将所有的Route用Switch标签包裹。（switch包裹的Route只会渲染首次匹配到的 组件。react-router-dom中默认是渲染所有匹配到的组件的）
3、给动态路由添加一个 公共的未匹配到路径的组件，并在 该组件中 使用 路由的属性 match.params.id 获取 传入的动态 id
核心代码：
import React
from
'react'
import {
BrowserRouter
as Router,
Route,
Link,
Switch
}
from
'react-router-dom'
const
AmbiguousExample
= ()
=> (
<
Router>
<
div>
<
ul>
<
li><
Link
to
=
"/about">About Us (static)</
Link></
li>
<
li><
Link
to
=
"/company">Company (static)</
Link></
li>
<
li><
Link
to
=
"/kim">Kim (dynamic)</
Link></
li>
<
li><
Link
to
=
"/chris">Chris (dynamic)</
Link></
li>
</
ul>
{
/*
Sometimes you want to have a whitelist of static paths
like "/about" and "/company" but also allow for dynamic
patterns like "/:user". The problem is that "/about"
is ambiguous and will match both "/about" and "/:user".
Most routers have an algorithm to decide for you what
it will match since they only allow you to match one
"route". React Router lets you match in multiple places
on purpose (sidebars, breadcrumbs, etc). So, when you
want to clear up any ambiguous matching, and not match
"/about" to "/:user", just wrap your <Route>s in a
<Switch>. It will render the first one that matches.
*/
}
<
Switch>
<
Route
path
=
"/about"
component
=
{About
}/>
<
Route
path
=
"/company"
component
=
{Company
}/>
<
Route
path
=
"/:id"
component
=
{User
}/>
</
Switch>
</
div>
</
Router>
)
const
About
= ()
=> <
h2>About</
h2>
const
Company
= ()
=> <
h2>Company</
h2>
const
User
= ({
match })
=> {
console.
log(match)
return (
<
div>
<
h2>User:
{match.params.id
}</
h2>
</
div>
)
}
export
default AmbiguousExample