react-路由传参

路由传参用到 render

<Route path='/demo' render={(props) => <Demo {...props} name='你好' />}></Route>

完整案例如下

1、传参

App.js

import React from 'react';
import { BrowserRouter, HashRouter, Switch, Route, Link } from 'react-router-dom'
import Demo from './pages/Demo'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route path='/demo' render={(props) => <Demo {...props} name='你好' />}></Route>
          <Route component={NotFound}></Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

/**
 * 路由传参：render
 * 
 * Route中可以使用render来显示页面或者渲染html
 * <Route path='/demo' render={() => <div>hello</div>}></Route>
 * <Route path='/demo' render={(props) => <Demo {...props} name='你好' />}></Route>
 * 
 * 渲染组件时，在组件中可以传参，类似于组件引用
 */

2、接收

Demo.jsx

import React from 'react'

const Demo = (props) => {
  console.log(`props`, props)
  return (
    <div>Demo页面：
      {props.name}
    </div>
  )
}

export default Demo

3、打印

Demo.jsx 页面就收到的 props 打印：