Question

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

routes.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

Answer 2

是的，可以。

let url = 'my/:path';

<Route path={url + '/with/url'} component={YourComponent}/>

React - 将变量插入Route路径

2 个答案: