链接到 React 中的另一个页面

Posted 2023-02-22

【中文标题】链接到 React 中的另一个页面

【英文标题】：linking to another page in React

【发布时间】：2020-05-13 10:20:37

【问题描述】：

我想从一个 React 页面链接到静态站点上的另一个页面，但我的路由一直链接到 /#/info，这似乎没有任何作用。

我的 index.js 文件：

ReactDOM.render(<App />, document.getElementById('root'));

我的 App.js 文件：

import React from 'react'
import  HashRouter, Switch, Route, Link  from 'react-router-dom'
import Stream from './Stream.js'
import Info from './Info.js'

function App() 
 return (
  <HashRouter>
   <Switch>
    <Route exact path='/' component='Stream' />
    <Route path='/info' component='Info' />
   </Switch>
   <Link to='/info'>Info</Link>
   <Stream />
  </HashRouter>
 );

export default App;

我的 Stream.js：

import React from 'react'

function Stream() 
 return (
  <div>Stream</div>
 );

export default Stream;

我的 Info.js：

import React from 'react'
import  Switch, Route  from 'react-router-dom'

function Info() 
 return (
  <h1>Info</h1>
 );

export default Info;

根据this，将 url 重写为/#/info 是预期行为，但单击链接时我的内容未加载。我希望 <Stream /> 消失，并让 <Info /> 的内容取而代之。

【参考方案1】：

如果您将实际组件而不是它们的名称作为字符串传递，您的代码就可以正常工作：

<Switch>
    <Route exact path="/" component=Stream />
    <Route path="/info" component=Info />
</Switch>

【讨论】：

这会渲染 Info 的内容，但是一旦点击链接，我如何让 Stream 的内容消失？

没有理由在<Route>s 下进行 调用。您本质上是在说，“根据路由渲染 Stream 或 Info，但之后无论如何都会再次渲染 Stream”

【参考方案2】：

尝试使用BrowserRouter

import  BrowserRouter  from 'react-router-dom';

function App() 
  return (
   <BrowserRouter>
     <Switch>
       <Route exact path='/' component='Stream' />
       <Route path='/info' component='Info' />
    </Switch>
    <Link to='/info'>Info</Link>
    <Stream />
   </BrowserRouter>
  );

【讨论】：

那应该没关系

BrowserRouter 仅适用于需要动态页面的站点。我的网站是静态的，所以我使用的是 HashRouter