Fatal编程技术网
  • html/
  • Html 如何通过React路由器传递参数？

Html 如何通过React路由器传递参数？

html reactjs

Html 如何通过React路由器传递参数？,html,reactjs,react-router-dom,Html,Reactjs,React Router Dom,当我尝试使用react router dom传递一个参数时，我得到一个404 Not Found错误。如果删除该参数，它将正常工作。我想将用户名传递给页面，以便它可以动态更改 import React, { Component } from 'react' import "../css/App.css" import { BrowserRouter as Router, Switch, Route, withRouter } from 'react-router-dom' import Welc

当我尝试使用
react router dom
传递一个参数时，我得到一个
404 Not Found
错误。如果删除该参数，它将正常工作。我想将用户名传递给页面，以便它可以动态更改

import React, { Component } from 'react'
import "../css/App.css"
import { BrowserRouter as Router, Switch, Route, withRouter } from 'react-router-dom'
import WelcomeVisitor from '../pages/WelcomeVisitor'
import ThankYou from '../pages/ThankYou'
import RabbitmqService, { connectRabbit } from '../rabbitmq/RabbitMQService'


function App(){


    connectRabbit()

    return (
      <Router>
        <div className="App">
          <Switch>
            <Route path="/thankyou" component={ThankYou}/>
            <Route path="/welcome/:user" component={WelcomeVisitor}/>
          </Switch>
        </div>
      </Router>
    );

  }

export default App

import React，{Component}来自“React”
导入“./css/App.css”
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，withRouter}
从“../pages/WelcomeVisitor”导入WelcomeVisitor
从“../pages/Thankyu”导入Thankyu
从“../rabbitmq/RabbitmqService”导入RabbitmqService，{connectRabbit}
函数App（）{
连接兔（）
返回(
);
}
导出默认应用程序
欢迎访问组件：

import React from 'react'
import "../css/WelcomeScreen.css"
import Trapezoid from '../components/Trapezoid'
import GuestName from '../components/GuestName'
import Logo from '../components/Logo'

export default function WelcomeVisitor(props){
    return (
        <div className="parentView">
            <Trapezoid />
            <GuestName guestName={props.match.params.user}/>
            <Logo />
        </div>
    )
}

import React from 'react'
import '../css/GuestName.css'


export default function GuestName(Guest){
    console.log(Guest.guestName)
    const name = Guest.guestName
    return(
        <div>
            <h1 className="guestName"> {name} </h1>
        </div>
    )
}

从“React”导入React
导入“./css/WelcomeScreen.css”
从“../components/梯形”导入梯形
从“../components/GuestName”导入GuestName
从“../components/Logo”导入徽标
导出默认函数WelcomeVisitor（道具）{
返回(
)
}
GuestName组件：

import React from 'react'
import "../css/WelcomeScreen.css"
import Trapezoid from '../components/Trapezoid'
import GuestName from '../components/GuestName'
import Logo from '../components/Logo'

export default function WelcomeVisitor(props){
    return (
        <div className="parentView">
            <Trapezoid />
            <GuestName guestName={props.match.params.user}/>
            <Logo />
        </div>
    )
}

import React from 'react'
import '../css/GuestName.css'


export default function GuestName(Guest){
    console.log(Guest.guestName)
    const name = Guest.guestName
    return(
        <div>
            <h1 className="guestName"> {name} </h1>
        </div>
    )
}

从“React”导入React
导入“../css/GuestName.css”
导出默认功能GuestName（Guest）{
console.log（Guest.guestName）
const name=Guest.guestName
返回(
{name}
)
}
Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render( <App /> , document.getElementById('app'));

从“React”导入React；
从“react dom”导入react dom；
从“./components/App”导入应用程序；
ReactDOM.render（，document.getElementById（'app'））；
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My React App</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>


我的React应用程序
例如，当我输入
http://localhost:8080/welcome/bob
我得到一个404，上面说请求url是
请求url:http://localhost:8080/welcome/index_bundle.js

如果您可以升级到最新的react路由器，则不再需要内联处理组件。您可以使用：

但是，对于旧版本，您可以使用渲染道具（注意渲染道具只有匹配、位置和历史记录。您可以将变量传递给作为子元素的组件）

}>

它可能有拼写错误，但姚应该明白这个概念。（从手机中键入）。

因此，如果我理解正确，如果您键入
/welcome/john
，即使您在路线中声明了
path=“/welcome/：user
，您仍然可以使用404？请确保在通过路线时使用
guestName
小写形式的
guestName
props@UdenduAbasili正确，它仍然会得到404