reactjs - React - 将变量插入路由路径

Question

我有一个正在创建的应用程序，我想知道如何将变量插入到 <Route path={insert variable here} component={myProfile}> 中。我正在尝试创建一个 myProfile 页面，并且我正在尝试获取它，因此当他们单击链接时，它会将它们重定向到 http://mywebsite.com/userId但是当我尝试创建一个 Route 时在 path 中有一个变量参数，它不会返回我在该路径上尝试呈现的组件。

路线.js

import { Meteor } from "meteor/meteor"
import React from "react";
import { withRouter, Switch, BrowserRouter, Route, Redirect, Link } from "react-router-dom";

import Login from "../ui/authentication/Login";
import Signup from "../ui/authentication/Signup";
import Home from "../ui/Home";
import { SubjectRoutes } from "../ui/subjectRoutes/subjectRoutes";
import AddNote from "../ui/AddNote";
import myProfile from "../ui/myProfile";
import NotFound from "../ui/NotFound";

export default class Routes extends React.Component{
  renderSubjectRoutes(subjects){
    return subjects.map((subject) => {
      return <Route key={subject.name} path={subject.path} component={subject.component}/>
    })
  }
  render(){
    return (
      <div>
        <BrowserRouter>
          <Switch>
            <Login path="/login" />
            <Signup path="/signup" />
            <Route path="/" component={Home} exact/>
            {this.renderSubjectRoutes(SubjectRoutes)}
            <AddNote path="/addNote"/>
            <myProfile path={Meteor.userId()} /> //<-- Here
            <NotFound />
          </Switch>
        </BrowserRouter>
      </div>
    )
  }
}

Menu.js

import { Meteor } from "meteor/meteor"
import React from "react";
import { withRouter, Link } from "react-router-dom";

import { SubjectRoutes } from "./subjectRoutes/subjectRoutes";
import AddNote from "./AddNote";

class Menu extends React.Component{
  renderMenu(items){
    return items.map((item) => {
      return <p key={item.name}><Link to={item.path}>{item.name}</Link></p>
    })
  }
  render(){
    return(
      <div>
        <h1>Menu</h1>
        {this.renderMenu(SubjectRoutes)}
        <p><Link to="/addNote">Add a Note</Link></p>
        <p><Link to={Meteor.userId()}>My Profile</Link></p>
      </div>
    )
  }
}
export default withRouter(Menu)

Answer 1

您正在为自己创造更多的工作，这是向路由添加变量的错误方法。您要做的是添加 params到你的路线。在您的情况下，您希望它看起来像这样。

<Route path="/user/:userId" />

:是什么表示它是一个参数，准备渲染基于 userId 的路径.所以如果你去路线 /user/123 - 它将能够呈现用户 123 的数据。

这里有一些文档可以帮助你。

https://reacttraining.com/react-router/web/example/url-params