我正在为三个不同的路由使用相同的组件:
<Router>
<Home path="/" />
<Home path="/home" />
</Router>
有没有什么办法可以将它们合并成这样:
<Router>
<Home path=["/home", "/"] />
</Router>
我正在为三个不同的路由使用相同的组件:
<Router>
<Home path="/" />
<Home path="/home" />
</Router>
<Router>
<Home path=["/home", "/"] />
</Router>
我对文档和@cullen-bond提供的通配符解决方案不满意,因为我还需要映射许多其他路径,所以我想出了这个解决方案:
<Router>
{["/home", "/", "/other", "/a-lot-more"].map(page => <Home path={page} />)}
</Router>
示例:https://codesandbox.io/s/reach-router-starter-v1-forked-6f44c?file=/src/index.js
<Router>
<Home path="/*" />
<Chicken path="chicken">
</Router>
...
const Home = props => {
let urlPath = props["*"]
// URL: "/home"
// urlPath === "home"
// URL/: "/"
// urlPath ===""
}
<Redirect />
也可能起到作用。<Router>
<Redirect from="/" path="/home" noThrow />
<Home path="/home" />
</Router>
您可以使用路由数组,为不同的路径使用单个组件。
示例代码:
import sampleComponent from './sampleComponent'; // 单个组件用于多个路由
<Router>
<Switch>
{["/pathname_1", "/pathname_2", "/pathname_3", "/pathname_4", "/pathname_5", "/pathname_6"].map(pathname => (<Route exact path={pathname} component={sampleComponent} />) )}
<Switch>
<Router>