javascript 如何将 React Router 与 match.params 一起使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50079769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use React Router with match.params?
提问by Jota
i'm doing the project and i need to create some routes with React Router. My project is:
我正在做这个项目，我需要用 React Router 创建一些路由。我的项目是：
Each square has a id 200and 201, and each turn that i to click i want to go for route like: http://localhost:3000/user/200or http://localhost:3000/user/201and when to go for that route, i want it to appear in the body"User 200"or "User201", i read the documentation but did not understand..
每个方格都有一个 id200和201，我点击的每一个转弯我都想走这样的路线：http://localhost:3000/user/200或者http://localhost:3000/user/201什么时候走那条路线，我希望它出现在body"User 200"or 中"User201"，我阅读了文档但不明白..
My APP.JS:
我的APP.JS：
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './App.css';
import Home from './Home';
const App = () => (
<Router>
<Home/>
</Router>
);
export default App;My HOME.JS:
我的HOME.JS：
import React from 'react';
import Header from './Header';
import Body from './Body';
import './Home.css';
class Home extends React.Component {
render() {
return ( <
div className = 'home' >
<
Header / >
<
Body / >
<
/div>
)
}
}
export default Home;My BODY.JS:
我的BODY.JS：
import React from 'react';
import './Body.css';
import axios from 'axios';
import {
Link
} from "react-router-dom";
class Body extends React.Component {
constructor() {
super();
this.state = {
employee: [],
}
}
componentDidMount() {
axios.get('http://127.0.0.1:3004/employee').then(
response => this.setState({
employee: response.data
})
)
}
getName = () => {
const {
employee
} = this.state;
return employee.map(name => < Link className = 'link'
to = '/user' > < div key = {
name.id
}
className = 'item' > < img className = 'img'
src = {
`https://picsum.photos/${name.name}`
} > < /img> <h1 className='name'> {name.name} </h
1 > < /div> </Link > )
}
render() {
return ( <
div className = 'body' > {
this.getName()
} <
/div>
)
}
}
export default Body;Someone would can help me please??
有人可以帮我吗？？
回答by Milos Mosovsky
At first you didn't setup your router correctly
起初你没有正确设置你的路由器
App.js
应用程序.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
class App extends React.Component {
render () {
return (
<Router>
<Home>
<Switch>
<Route path='/user/:token' component={Body} />
</Switch>
</Home>
</Router>
)
}
}
Home.js - now you are wrapping router inside children
Home.js - 现在您正在将路由器包装在儿童中
class Home extends React.Component {
render () {
return (<div className='home' >
<Header />
{this.props.children} {/* This line will render router children which will be Body */}
</div>
)
}
}
Body.js
正文.js
Inside body you will now receive this.props.match.paramsI think you will figure out by yourself
你现在会收到里面的身体this.props.match.params我想你会自己弄清楚的
