使用 React-Router-Dom 隐藏 Url 扩展 [英] Hide Url extensions using React-Router-Dom

问题描述

我正在使用 react-router-dom 在 React 站点中创建客户端页面.此扩展程序运行良好，但我想知道是否有办法隐藏 URL 扩展程序，使其不显示在浏览器导航栏中.

这是我的代码:

class App 扩展组件 {使成为() {返回 (<div><ul><li><Link to="/">首页</Link></li><li><Link to="/airports">Airports</Link></li><li><Link to="/cities">城市</Link></li><li><Link to="/courses">课程</Link></li><Route path="/" 精确组件={Home}/>{/* 你不必总是渲染整个组件 */}<Route path="/airports" render={() =>(<div>这是机场路线</div>)}/><Route path="/cities" component={City}/><Route path="/courses" component={Courses}/>

);}}

所以点击机场会显示www.myurl.com/airports，点击城市会显示www.myurl.com/城市.由于这些页面是在客户端而不是服务器端创建的，我真的很想隐藏这些扩展，以便每当我点击这些链接时，它只会显示 www.myurl.com.

希望有一种简单的方法可以实现这一点.非常感谢任何帮助！

解决方案

有两种方法可以做到:

1. 使用内存历史

来自文档:

<块引用>

内存历史记录不会从地址栏中操作或读取.这是我们实现服务器渲染的方式.它也可用于测试和其他渲染环境(如 React Native).

像这样使用:

const history = createMemoryHistory(location)使成为(<路由器历史={历史}><Route path='/' component={App}><IndexRoute 组件={Home}/><Route path='about' component={About}/><Route path='features' component={Features}/></路线></路由器>,document.getElementById('app'))

2. 使用 内存路由器

来自文档:

<块引用>

一个将您的URL"历史记录保存在内存中的路由器(不会读取或写入地址栏).在测试和非浏览器中有用像 React Native 这样的环境.

import { MemoryRouter } from 'react-router'<MemoryRouter><应用程序/></MemoryRouter>

I'm using react-router-dom to create client-side pages within a React site. This extension is working fine but I'm wondering if there is a way I can hide the URL extensions from appearing within the browser navigation bar.

Here is my code:

class App extends Component {
  render() {
    return (
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/airports">Airports</Link></li>
          <li><Link to="/cities">Cities</Link></li>
          <li><Link to="/courses">Courses</Link></li>
        </ul>

        <Route path="/" exact component={Home}/>
        {/* You don't always have to render a whole component */}
        <Route path="/airports" render={() => (<div> This is the airport route </div>)}/>
        <Route path="/cities" component={City}/>
        <Route path="/courses" component={Courses}/>
      </div>
    );
  }
}

So clicking on Airports will show www.myurl.com/airports, clicking on Cities shows www.myurl.com/cities. Since these pages are created client-side and not server-side, I'd really like to hide these extensions so that whenever I click on these links, it will just show the host name of www.myurl.com.

Hopefully there is an easy way of accomplishing this. Any help is greatly appreciated!

解决方案

There are two ways to do this:

1. Using Memory History

From the docs:

Memory history doesn't manipulate or read from the address bar. This is how we implement server rendering. It's also useful for testing and other rendering environments (like React Native).

Use one like so:

const history = createMemoryHistory(location)
render(
  <Router history={history}>
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route path='features' component={Features} />
    </Route>
  </Router>,
  document.getElementById('app')
)

2. Using MemoryRouter

From the docs:

A Router that keeps the history of your "URL" in memory (does not read or write to the address bar). Useful in tests and non-browser environments like React Native.

import { MemoryRouter } from 'react-router'

<MemoryRouter>
  <App/>
</MemoryRouter>

这篇关于使用 React-Router-Dom 隐藏 Url 扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！