React Router v4 阻止运行父路由组件答案

【问题标题】：React Router v4 prevent from running parent route componentReact Router v4 阻止运行父路由组件
【发布时间】：2017-07-21 08:36:01
【问题描述】：

我正在使用 React [15.6.1] 和 Router [4.1.1] 构建文章搜索，并注意到在尝试直接访问文章时加载了前一个组件，即使它不是被调用的组件

// === Layout ==================
class Layout extends React.Component {

    render() {
        return (
            <Provider store={this.props.store}>
                <HashRouter>
                    <div>
                        <Switch>
                            <Route exact path="/" component={SearchFilter} />
                            <Route path="/article/:guid" component={Article} />
                        </Switch>
                    </div>
                </HashRouter>
            </Provider>
        );
    }

}

// === SearchFilter ==================
class SearchFilter extends React.Component {

    componentDidMount() {
        console.log('SearchFilter Did Mount');
    }

    render() {
        return (
            <div>...</div>
        );
    }

}

// === Article ==================
class Article extends React.Component {

    componentDidMount() {
        console.log('Article Did Mount');
    }

    render() {
        return (
            <div>...</div>
        );
    }

}

所以当转到根目录时 localhost:3000/#/ 它会打印出来

// SearchFilter Did Mount

当我像这样 localhost:3000/#/article/123456 直接访问一篇文章时，它会打印出来

// SearchFilter Did Mount
// Article Did Mount

所以我的问题是，我怎样才能防止它运行以前的路线？因为我想在那里分派一些动作，这些动作会触发对 web 服务的一些 ajax 调用。

谢谢

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

试试这个：

<HashRouter basename="/">
    <div>
        <Switch>
            <Route exact path="/search" component={SearchFilter} />
            <Route path="/article/:guid" component={Article} />
        </Switch>
    </div>
</HashRouter>

【讨论】：

嗨，我试图避免这种情况，因为那时我必须将根目录 / 重定向到 /search ，当我这样做时，文章就会停止工作

【解决方案2】：

编辑：

对我来说它运行良好......就像说的那样......你的机器上发生了一些非常奇怪和隐藏的事情，或者你只是把 / 然后重写 url 到 /#/article/123 并导致第一个日志保留在控制台中，但它来自先前的 url “/”，如果您在新 url /#/article/123 上按 F5 重新加载浏览器，您将只看到“Article did mount”

【讨论】：

嗨@Melounek 这是我的错字。我正在使用 //localhost:3000/#/
我认为您只需在输入 url 后刷新整个浏览器，因为对我来说它工作正常......（添加 #/anythink... 浏览器将不会重新加载）
问题是，一旦您直接访问文章，它应该控制台.log 仅 Article Did Mount 而不是 Article Did Mount 和 SearchFilter 已安装
我正在测试它，它只记录“article did mount”.. . 所以在控制台中将保留第一条消息“searchFilter did mount”但是如果你确定，这不是你的情况，你真的是从空白浏览器访问这个 url，所以很奇怪
如果用户为文章添加书签，我会考虑更多条款，因此他不会进行搜索。对我来说，如果我直接去那里它会触发两者，因此问题是，是否可以让路由只加载文章而不是两者