如何将代码从路由传输到组件

Question

我有路线

            <BrowserRouter>
                <Navbar />
                <div className="container pt-4">
                    <Switch>
                        <Route path="/" exact component={Home}></Route>
                        <Route path="/files" component={Files}></Route>
                        <Route path="/signin" component={SignIn}></Route>
                        <Route path="/signup" component={SignUp}></Route>
                        <Route path="/:url_code" component={File}></Route>
                    </Switch>
                </div>
            </BrowserRouter>

如何传递:url_code一个File页面。

import React, { Fragment } from 'react';

import { Item } from './../components/Item.component';

export const File = () => {
    return (
        <Fragment>
            <h3>test</h3>
            <hr />
            <Item />
        </Fragment>
    );
};

Answer 1

您将需要给您的组件访问反应路由器的match对象。您可以使用名为withRouter的高阶组件来完成此操作。这使您可以作为传递给组件的道具访问location、history和match。在那里，您可以通过url_code提取match.params片段。

import React, { Fragment } from 'react';
import { withRouter } from "react-router";

import { Item } from './../components/Item.component';
const File = ({ match }) => {
    return (
        <Fragment>
            <h3>{match.params.url_code}</h3>
            <hr />
            <Item />
        </Fragment>
    );
};

export withRouter(File)