React Router 如何知道路径

Question

我知道这个信息我可以在网上找到，并且试过了。问题是我不知道它是否适用于许多不同的版本，但我检查的每一页都提供（有时完全）不同的解决方案。

鉴于此代码：

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
/* ...More code here... */
class Footer extends React.Component {
    render () {
        const current_page = location.href.replace('http://localhost:3000', '');
        return (
                <footer>
                <a href="/" className={current_page == '/' ? 'active' : ''}>Game</a>
                <a href="/page" className={current_page == '/page' ? 'active' : ''}>Page</a>
                <p>Current route <strong>{current_page}</strong></p>
            </footer>
        );
    }
}
ReactDOM.render(
    <Router>
        <div>
            <h1>RactJS app</h1>
            <Switch>
                <Route exact path="/" component={ Game } />
                <Route exact path="/page" component={ Page } />
            </Switch>
            <Footer></Footer>
        </div>
    </Router>,
    document.getElementById('root')
);

我可以 current_page React 方式 吗？现在我不得不使用它来编译：/* eslint-disable no-restricted-globals */

如您所料，我是 ReactJS 的新手

Answer 1

你好像用的是 react-router v4.

您可以从 this.props.location.pathname 获取当前路径。

所以

const current_page = this.props.location.pathname;
...

您可以使用来自 react-router 的 NavLink，而不是在 activePath 上使用带有 className 的锚点。

import { NavLink } from 'react-router-dom';
...

<NavLink exact to="/" activeClassName="active">Game</NavLink>
<NavLink exact to="/page" activeClassName="active">Page</NavLink>

并用 withRouter 包装您的页脚。在您的 footer.js 上，使用以下内容。

import { withRouter } from 'react-router-dom';
...

export default withRouter(Footer);

Answer 2

因为你想在 Footer 组件中获取 location pathname 不接收路由器道具，你可以用 withRouter 包装 Footer 组件和然后访问像 this.props.location.pathname

这样的路径

import { withRouter } from 'react-router';
class Footer extends React.Component {
    render () {
        const current_page = this.props.location.pathname;
        return (
                <footer>
                <a href="/" className={current_page == '/' ? 'active' : ''}>Game</a>
                <a href="/page" className={current_page == '/page' ? 'active' : ''}>Page</a>
                <p>Current route <strong>{current_page}</strong></p>
            </footer>
        );
    }
}

const WrappedFooter = withRouter(Footer)
ReactDOM.render(
    <Router>
        <div>
            <h1>RactJS app</h1>
            <Switch>
                <Route exact path="/" component={ Game } />
                <Route exact path="/page" component={ Page } />
            </Switch>
            <WrappedFooter></WrappedFooter>
        </div>
    </Router>,
    document.getElementById('root')
);

Answer 3

import { withRouter } from 'react-router';
class Footer extends React.Component {
    render () {
        const current_page = this.props.location.pathname;
        return (
                <footer>
                <a href="/" className={current_page == '/' ? 'active' : ''}>Game</a>
                <a href="/page" className={current_page == '/page' ? 'active' : ''}>Page</a>
                <p>Current route <strong>{current_page}</strong></p>
            </footer>
        );
    }
}

const WrappedFooter = withRouter(Footer)
ReactDOM.render(
    <Router>
        <div>
            <h1>RactJS app</h1>
            <Switch>
                <Route exact path="/" component={ Game } />
                <Route exact path="/page" component={ Page } />
            </Switch>
            <WrappedFooter></WrappedFooter>
        </div>
    </Router>,
    document.getElementById('root')
);

React Router 如何知道路径

React Router how to know the path

reactjs

react-router

react-router-dom