linking to another page in React

Question

I want to link from one React page to another on a static site, but my routes keep linking to /#/info which doesn't seem to do anything.

my index.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;

According to this the url being rewritten as /#/info is expected behavior, but my content is not loading when the link is clicked. I want <Stream /> to go away and for the contents of <Info /> to take its place.

jaredsk · Accepted Answer · 2020-01-28 02:21:58Z

3

Your code works fine if you pass in the actual components rather than their names as strings:

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

answered Jan 28, 2020 at 2:21

jaredsk

2,7862 gold badges20 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

calyxofheld Over a year ago

This renders the content for Info, but how would I make Stream content disappear once the link is clicked?

jaredsk Over a year ago

There's no reason to have the <Stream /> call under the <Route>s. You're essentially saying, "render either Stream or Info depending on the route, but then render Stream again after that no matter what"

Zohaib Ijaz · Accepted Answer · 2020-01-28 02:19:05Z

try using 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 is only for sites that expect dynamic pages. My site is static, so I am using HashRouter

Collectives™ on Stack Overflow

linking to another page in React

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related