Question

刚开始新的React项目（仍然是React的初学者），我必须处理有关路由的新问题。

网站基于Symfony后端，前面使用了React。在启动页面时，我必须转到需要slug的URL并且它由Symfony路由控制，它没关系：

//domain.com/slug

但后来我在单页上发生了一切反应。在这个单页面上，我有容器，我必须根据用户的操作切换组件（比如简单的点击链接）。不是整页重装，只有组件容器部分。它的主要部分是MainPage组件（root）：

<header>some header</header>
<div id="content-wrapper">
    <div class="switch-components-inside">
        <ComponentsWrapper page={this.state.subPage} />
    </div>
</div>
<footer>footer!</footer>

说实话我很困惑，因为我不知道如何使用react-router来构建这样的结构。也许我应该自己修改网址？我希望能够使用这样的URL（当然可以在slug之后使用hash），但是所有这些都应该指向同一个组件（MainPage），并且只有部分站点应该加载不同的组件。

//domain.com/slug#/news
//domain.com/slug#/news/some-news
//domain.com/slug#/authors
//domain.com/slug#/authors/some-author

感谢您的帮助。

Answer 1

使用react-router的{{3}}进行基于散列的路由。

使用网址的哈希部分的<Router>（即   window.location.hash）使您的UI与URL保持同步。

重要说明：哈希历史记录不支持location.key或   location.state。在以前的版本中，我们试图填充行为   但是有一些我们无法解决的边缘情况。任何代码或插件   需要这种行为是行不通的。因为这种技术仅用于   支持旧版浏览器，我们建议您将服务器配置为   与之合作。

所以在你的情况下你可能有：

const App = () => {
  return (
    <HashRouter>
      <div>
        <header>some header</header>
        <div id="content-wrapper">
          <Switch>
            <Route path="/news" component={NewsComponent}/>
            <Route path="/authors" component={AuthorsComponent}/>
          </Switch>
        </div>
        <footer>footer!</footer>
      </div>
    </HashRouter>
  )
};

但是，根据重要提示，最好将后端配置为忽略嵌套在//domain.com/slug下的路线，而是使用<BrowserRouter basename="/slug">

与自定义路由反应（在Symfony后端）

1 个答案: