ссылка на другую страницу в React - PullRequest
Новая
       11

ссылка на другую страницу в React

0 голосов
/ 28 января 2020

Я хочу ссылаться с одной страницы React на другую на сайте c, но мои маршруты продолжают ссылаться на /#/info, который, похоже, ничего не делает.

мой индекс. js file: 

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

My App. js file: 

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;

My Stream. js: 

import React from 'react'

function Stream() {
 return (
  <div>Stream</div>
 );
}
export default Stream;

My 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 /> до go и содержимое <Info /> заняло свое место.

Ответы [ 2 ]

3 голосов
/ 28 января 2020

Ваш код работает нормально, если вы передаете фактические компоненты, а не их имена в виде строк: 

<Switch>
    <Route exact path="/" component={Stream} />
    <Route path="/info" component={Info} />
</Switch>
0 голосов
/ 28 января 2020

попробуйте использовать 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>
  );
}
...