Question

我为一个页面滚动网站创建了一个导航栏。一切正常。我将网址从：http://example.com #sectionb 更改为http://example.com/ sectionb

当我点击导航栏中的其他项目时，页面滚动到所需部分，网址更改为http://example.com/ sectionc

我这样做：

id = $(this).attr('href');
var link = id.split('#')[1];
window.history.pushState("", "Title", link);

然而问题是，当我使用网址http://example.com / sectionb 刷新页面时，显示页面未找到404 ！但是，当我使用http://example.com / #sectionb 时，它会显示“sectionb”

当我使用http://example.com/sectionb刷新页面时，我想要的是查看“sectionb”部分

html：

<nav>
  <ul>
    <li><a href="sectiona" data-uri="1">First</a></li>
    <li><a href="sectionb" data-uri="2">Second</a></li>
    <li><a href="sectionc" data-uri="3">Third</a></li>
  </ul>
</nav>

<div class="sections">
  <section id="sectiona"></section>
  <section id="sectionb"></section>
  <section id="sectionc"></section>
</div>

JS：

    var sections = $('section')
  , nav = $('nav')
  , nav_height = nav.outerHeight();

$(window).on('scroll', function () {
  var cur_pos = $(this).scrollTop();

  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('active');
      sections.removeClass('active');
      $(this).addClass('active');
      nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
    }
  });
});

nav.find('a').on('click', function (e) {
  var $el = $(this)
    , id = $el.attr('href');
  e.preventDefault();
  $('html, body').animate({
    scrollTop: $(id).offset().top - nav_height
  }, 500);

  var link = id.split('#')[1];
  window.history.pushState("", "Title", link);
  return false;
});

Answer 1

您的代码只会更新历史记录中的网址。这绝不意味着您放置的URL有效。

http://example.com/#sectionb表示在域根目录的默认文档中找到id sectionb http://example.com/sectionb的元素并导航（滚动）到它。
sectionb表示在名为http://example.com/#sectionb

的子目录中加载默认文档

您似乎在说原始网址为：

http://example.com/sectionb

您的代码将其更改为：

http://example.com/#sectionb

然后，您希望该网址导航至：

componentDidMount() { this.setState({ isLoading: true}); // start your loader this.props.fetchA() .then(() => { return this.props.fetchB(); }) .then(() => { return this.props.fetchC() }) .then(() => { this.setState({ isLoading: false }); // Once done, set loader to false }) .catch(error => { console.log('Oh no, something went wrong', error); }); }

这似乎是循环的。你想解决什么问题？

Answer 2

问题解决了我编辑我的控制器：http://example.com/ {sect}

    /**
     * Matches /*
     *
     * @Route("/{sec}", name="home")
     * 
     */
    public function index($sec = null) 
    {
        //return new Response('Test');
        //dump($sec);
        return $this->render('pages/nav.html.twig', [
            'sec' => $sec,
        ]);
    }

感谢的

我从（URL）中删除了哈希，我找不到404页面

2 个答案: