React 路由器在 URL 栏中不起作用，但它仍然可以与 <Link> 标签一起使用

Question

所以我有一条像文档中那样的路线：<Route path="*"><Redirect to={'/'}/></Route>。确保如果路由不存在，所有路由都会指向“/”。

我的所有路由都可以使用<Link>标签，但当我在 URL 栏中输入它们时则不行。

怎么会这样？我在网上找不到这方面的信息。

索引文件：

    return(
  <Fragment>
    <BrowserRouter basename={`/`}>
    <Switch>
        <App>
            <TransitionGroup>
                {routes.map(({ path, Component }) => (
                    <Route key={path} exact path={`${process.env.PUBLIC_URL}${path}`}>
                        {({ match }) => (
                            <CSSTransition in={match != null} timeout={100} classNames={anim} unmountOnExit>
                                <div><Component/></div>
                            </CSSTransition>
                        )}
                    </Route>
                ))}

                <Route exact path="*"><Redirect to={'/'}/></Route>

            </TransitionGroup>
        </App>
    </Switch>
    </BrowserRouter>
  </Fragment>
  )

路线文件：

export const routes = [
    {
            path:`/`,
            Component:Home
    },
    {
            path:`/login`,
            Component:Login
    },
    {
            path:`/signup`,
            Component:Signup
    },
    {
            path:`/event/:name`,
            Component:Event
    },
    {
            path:`/create-event`,
            Component:CreateEvent
    },

]

链接标签：

<Link to={"/event/" + events[i].name} className="text-dark">

Answer 1

从反应路由器文档中，

a 的所有子元素都<Switch>应该是<Route>or<Redirect>元素。仅渲染与当前位置匹配的第一个子项。

我可以看到<Route>不是直接孩子或第一个孩子<Switch>