Navigate Between Pages
Create New Route
We disable file-system route and use the next-routes
package instead. It allows you to refer to a route using a route name which very useful to maintain a large-scale web app.
// src/router/routes/_main.js
const routes = [
{
pattern: '/',
name: 'home',
page: 'index',
},
{
pattern: '/mypage', // you can access this page by entering www.mydomain.com/mypage
name: 'mypage', // use this name to refer to this route
page: 'mypage', // path of the file (relative to page directory)
},
{
pattern: '/article/:id', // For dynamic pages, use ":" to make it a variable
name: 'article-detail',
page: 'article-detail',
},
...
]
module.exports = routes
Basically, the value of name and page should be the same because it is easy to remember but this is not required.
Add Link to a Page
Just pass a route name to <Link />
via to
prop
import Link from '@link'
function MyNavigation() {
return (
<div>
<Link route="home">
<a>Home</a>
</Link>
<Link route="mypage">
<a>My Page</a>
</Link>
<Link route="article-detail" params={{ id: 1234 }}>
<a>Article ID: 1234</a>
</Link>
</div>
)
}
As you can see, you can pass parameters to a dynamic route using params
prop.