記事ディレクトリ
序文
この記事では、reactルーティングでルーティングパラメータを渡す方法と、ルーティングの集中管理を行う方法を記録します。
ルーティングパラメータ
1.：idを使用してパラメーターを渡します。
<BrowserRouter>
<ul>
<li><Link to='/user/:id'>用户中心</Link></li>
<li><Link to='/userinfo'>用户信息</Link></li>
<li><Link to='/userdetail'>用户详情</Link></li>
</ul>
<Switch>
<Route path='/user/:id' exact component={
User} />
<Route path='/userinfo' component={
UserInfo} />
<Route path='/userdetail' component={
UserDetail} />
</Switch>
</BrowserRouter>
小道具でIDをレンダリング
class User extends Component {
render() {
console.log(this.props)
return (
<div>
<h1>用户中心</h1>
<p>{
this.props.match.params.id}</p>
</div>
)
}
}
効果を確認してください：
2.スプライシングパラメータをルーティングしてパラメータを渡します
ユーザー情報の外側にラップされたリンクラベルに注意してください
<BrowserRouter>
<ul>
<li><Link to='/user/:id'>用户中心</Link></li>
<li><Link to='/userinfo?name=weiwei&age=18'>用户信息</Link></li>
<li><Link to='/userdetail'>用户详情</Link></li>
</ul>
<Switch>
<Route path='/user/:id' exact component={
User} />
<Route path='/userinfo' component={
UserInfo} />
<Route path='/userdetail' component={
UserDetail} />
</Switch>
</BrowserRouter>
querystringを使用してurlパラメータの値を解析し、querystringを使用する前にインストールしてインポートします
class UserInfo extends Component {
render() {
console.log(querystring.parse(this.props.location.search))
let {
name, age} = querystring.parse(this.props.location.search)
return (
<div>用户信息
<h2>用户姓名：{
name}</h2>
<h2>用户年龄：{
age}</h2>
</div>
)
}
}
効果を確認します。
3.オブジェクト形式でパラメータを渡す
この方法をお勧めします。パラメータを公開せず、多くの値を渡すことができるため、より便利
です。ユーザーの詳細のリンクに注意し、オブジェクトを直接書き込み、パス名にアドレスを書き込み、オブジェクトパラメータをに渡します。州。
<BrowserRouter>
<ul>
<li><Link to='/user/:id'>用户中心</Link></li>
<li><Link to='/userinfo?name=weiwei&age=18'>用户信息</Link></li>
<li><Link to={
{
pathname: '/userdetail', // 跳转的路径
// search: 'name=hello-world'
state: {
name: 'hahaha', age: 12}
}
}>用户详情</Link></li>
</ul>
<Switch>
<Route path='/user/:id' exact component={
User} />
<Route path='/userinfo' component={
UserInfo} />
<Route path='/userdetail' component={
UserDetail} />
</Switch>
</BrowserRouter>
class UserDetail extends Component {
render() {
console.log(this.props)
let {
name, age} = this.props.location.state
return (
<div>用户详情
<h2>用户姓名：{
name}</h2>
<h2>用户年龄：{
age}</h2>
</div>
)
}
}
効果を確認してください：
ルーティング集中管理
調査中、reactのルーティングは比較的分散していることがわかりました。それで、ルーティングを集中管理する方法はありますか？
ここでは、ルーティングマネージャーreact-router-configを使用する必要があります。使用する前にインストールしてから
インポートすると、{renderRoutes（routes）}を使用できます。
import React, {
Component } from 'react'
import {
BrowserRouter, Link} from 'react-router-dom'
import routes from './07router'
import {
renderRoutes} from 'react-router-config'
export class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<ul>
<li><Link to='/'>主页</Link></li>
<li><Link to='/about'>关于</Link></li>
<li><Link to='/user'>用户中心</Link></li>
</ul>
{
renderRoutes(routes)}
</BrowserRouter>
</div>
)
}
}
export default App
ルーティング関連の構成用に新しいファイルを作成します。
import Home from '../01pages/home'
import About from '../01pages/about'
import User from '../01pages/user'
const routes = [
{
path: '/',
exact: true,
component: Home
},
{
path: '/home',
exact: true,
component: Home
},
{
path: '/about',
component: About
},
{
path: '/user',
component: User
}
]
export default routes
これにより、ルーティングの集中処理が可能になります
一元化されたルート管理のサブルーター
サブルートを含むルートを実装する場合、それを実装する方法は？
以下を参照してください。
import React, {
Component } from 'react'
import {
BrowserRouter, Link} from 'react-router-dom'
import routes from './08router'
import {
renderRoutes} from 'react-router-config'
export class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<ul>
<li><Link to='/'>主页</Link></li>
<li><Link to='/about'>关于</Link></li>
<li><Link to='/about/son'>关于儿子</Link></li>
<li><Link to='/user'>用户中心</Link></li>
</ul>
{
renderRoutes(routes)}
</BrowserRouter>
</div>
)
}
}
export default App
ここでは、息子のコンテンツを書き込むための新しいファイルも作成する必要があります。
import React, {
Component } from 'react'
export class Son extends Component {
render() {
return (
<div>我是关于的Son</div>
)
}
}
export default Son
同じ新しいファイルが一元管理され、サブルートはルート内の別のレイヤーにラップされます。以下を参照してください。
// 在这里进行路由的相关配置
import Home from '../01pages/home'
import About from '../01pages/about'
import User from '../01pages/user'
import Son from './son'
const routes = [
{
path: '/',
exact: true,
component: Home
},
{
path: '/home',
exact: true,
component: Home
},
{
path: '/about',
component: About,
routes: [
{
path: '/about/son',
exact: true,
component: Son
}
]
},
{
path: '/user',
component: User
}
]
export default routes
効果を確認します。
さて、この記事はここにあります。それがあなたに役立つなら、あなたは好きで、フォローして、サポートすることができます~~
私は将来もっと多くのフロントエンドの知識コンテンツを持ってきます。