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

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

你需要让你的组件访问 react-router 的match object。 您可以使用名为withRouter的高阶组件来完成此操作。 这使您可以访问location 、 history和match作为传递给组件的道具。 从那里您可以通过match.params提取您的url_code片段。

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)