Question

在下面的ReactJS示例中，工具栏将位于app.js中并使用react-router

render(){
return (
<div className="App">
                <Router>
                    <Route
                        render={({ location }) => (
                            <div>
                                <Toolbar />
                                <TransitionGroup>
                                    <CSSTransition key={location.pathname} classNames="fade" timeout={200}>
                                        <Switch location={location} >
                                            <Route exact path="/" component={Home} />
                                            <Route exact path="/user/:id" component={UserDetails} />
                                        </Switch>
                                    </CSSTransition>
                                </TransitionGroup>
                            </div>
                        )}
                    />
                </Router>
            </div>
);

如何在工具栏组件中阅读：id？我计划有一个固定的工具栏，并在工具栏下面进行路线更改。有人可以帮忙吗？

我需要此信息以将特定于路线的导航添加到工具栏。

Answer 1

正确的方法是您必须在ToolBar内输入UserDetails。
或使用react-redux将提供最佳解决方案。
在这种情况下，您可以传递function来更改此state的{{1}}。将class更改为：

Route

在<Route exact path="/user/:id" render={(props) => <UserDetails changeParentState={this.changeParentState} />}/>类内部，使用id调用函数：

UserDetails

this.props.changeParentState(this.props.match.params.id);函数：

changeParentState

将const changeParentState = (id) => this.setState({id});更改为：

<Toolbar />

Answer 2

如果我的理解正确，那么您会想要以下内容：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";

const Toolbar = ({ location }) => {
  const url = location.pathname;
  const slashIndex = url.lastIndexOf('/');
  const idParam = url.substr(slashIndex + 1)
  return <p>params --> {idParam}</p>
};

const User = () => {
  return <h1>user</h1>
};

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Toolbar} />
        <Route path="/user/:id" component={User} />
      </Switch>
    </BrowserRouter>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作示例here。

（尝试更改URL，您将看到参数更改。）

如何将URL参数从React Router发送到工具栏？

2 个答案: