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

从react-router文档中，

<Switch>的所有子元素应该是<Route>或<Redirect>元素。只有第一个匹配当前位置的子元素才会被呈现。

我可以看到<Route>不是<Switch>的直接子结点或第一子结点

Answer 2

使用react-router中的Switch来呈现与位置匹配的第一个子元素。并且确保保留*之前的所有已知路径，以避免redirection到/路径。以下是针对您的情况的示例。

import React from "react";
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
} from "react-router-dom";
class App extends React.Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={() => <div>{"MAIN"}</div>} />
<Route
exact
path="/event/:name"
component={() => <div>{"SELECTED EVENT"}</div>}
/>
<Route exact path="*" component={() => <Redirect to={"/"} />} />
</Switch>
</Router>
);
}
}
export default App;

希望这能解决你的问题。