Question

我知道这些信息我可以在网上找到，并且尝试过。问题是，我不知道它是否针对许多不同的版本，但我检查的每个页面都提供了完全不同的解决方案。（/ p>

鉴于此代码：

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')
);

我可以用React方式获取current_page 吗？现在我必须使用它，所以它编译：{{1}}

你可以猜到，我在ReactJS中是一个新手

Answer 1

好像你正在使用react-router v4。

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

所以

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

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

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

由于您希望location pathname组件中的Footer无法接收路由器道具，您可以使用Footer包裹withRouter组件，然后访问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

Caused by: java.lang.ClassNotFoundException: com.facebook.react.devsupport.DevSupportManagerImpl
        at java.lang.Class.classForName(Native Method)
        at java.lang.Class.forName(Class.java:453)
        at java.lang.Class.forName(Class.java:378)
        at com.facebook.react.devsupport.b.a(DevSupportManagerFactory.java:67)

React Router如何知道路径

3 个答案: