Когда я пытаюсь передать параметр, используя 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
Компонент WelcomeVisitor:
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>
)
}
Компонент GuestName:
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>
)
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render( <App /> , 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>
Например, когда я ввожу http://localhost:8080/welcome/bob, я получаю 404, и он говорит, что URL-адрес запроса Request URL: http://localhost:8080/welcome/index_bundle.js.