ReactJS路由模糊路由匹配

Question

我查看了有关模糊匹配的React路由的培训文档，并了解您可以在交换机中使用静态路由，例如/ about，/ contact，然后匹配/：user。

我正在努力的是，我需要在同一级别上使用路线，但根据路线使用不同的组件，

e.g：

/devon        - RegionComponent
/privacy      - PageComponent
/dog-friendly - SearchResultsComponent

我所拥有的所有路线都在数据库中，因此需要是动态的。

你会怎么做呢？

Answer 1

安装包

npm install react-router-dom --save

导入此行

import { BrowserRouter as Router, Route, Link } from "react-router-dom";


在rander函数

中添加此代码

<Router> <Route path="/about" component={About} /> <Route path="/contact " component={contact } />
</Router>

Answer 2

您必须至少定义动态路线的第一个单词。见下面的代码

render((
    <Route path="/" component={App}>
      <Route path="user/*" component={UserComponent}/>
      <Route path="courses/*" component={CoursesComponent}/>
    </Route>
), document.getElementById('app'))

在上面的示例中，您可以拥有任何以用户/ 或课程/

开头的动态路线

React路由器会根据您的路线将您重定向到适当的组件。

Answer 3

如果您想拥有确定位置的路线，请使用以下

<Router>
    <Switch>
      <Route exact path="/" component={YourRootComponent} />
      <Route path="/devon" component={RegionComponent} />
      <Route path="/privacy" component={PageComponent} />
      <Route path="/dog-friendly" component={SearchResultsComponent} />
    </Switch>
</Router>

注意：＆＃39;确切＆＃39;将确保它符合确切的＆＃39; /＆＃39;路径。否则，如果你不使用＆＃39; exact＆＃39;对于你的root，它将首先匹配所有路由＆＃39; /＆＃39;并显示您的根组件，并将超过其他路由。如果您不想使用＆＃39; exact＆＃39;，其他替代方法可能是在其他路线的最末端写下您的根路线，即'<Route path="/" component={YourRootComponent} />'。

对于动态路线，您始终可以使用ES6's template literals在路线中附加动态字符串。