routing within an app using react router to move to another page

Question

I am trying to use router in my app
so I used react-router-dom, but I am facing issues,
researched and found this link but still not helping me. Invariant failed: You should not use <Route> outside a <Router>
can you tell me how to use route and link
i need to redirect to another page.
providing my code snippet and sandbox below. https://codesandbox.io/s/still-smoke-uf731

let Channel = ({ channelName, channelString, onClick, active }) => (
  <div onClick={onClick} className=" col-lg-2 col-md-4 col-sm-6 ">
    <div>router</div>

    <Router>
      <Link to={"/here"}> here</Link>
      <Switch>
        <Route path="/auth" />
        <Route path="/" />
      </Switch>
    </Router>
    <div
      className="channel-button"
      style={{
        backgroundColor: active === channelString ? "orange" : ""
      }}
    >
      <p>{channelName}</p>
    </div>
  </div>
);

score 0 · Answer 1 · answered Sep 25 '19 at 20:32

0

Use exact as an attribute in your home route like the following code.

<Router>
  <Link to={"/here"}> here</Link>
  <Switch>
    <Route exact path="/" />
    <Route path="/auth" />
  </Switch>
</Router>

answered Sep 25 '19 at 20:32

Ibrahim Hasnat

612
7
13

score 0 · Answer 2 · edited Sep 26 '19 at 06:36

0

You can try this:

import Stats from './containers/stats';
<Route
   exact={true}
   path="/"
   component={Stats}
   key="Mykey"
 />

edited Sep 26 '19 at 06:36

Dino

6,207
8
28
62

answered Sep 25 '19 at 20:35

Aye_baybae

64
3

The provided answer was flagged for review as a Low Quality Post. Here are some guidelines for How do I write a good answer?. This provided answer may be correct, but it could benefit from an explanation. Code only answers are not considered "good" answers. From review. – Lord Elrond Sep 26 '19 at 04:28

score 0 · Answer 3 · answered Sep 25 '19 at 21:53

I checked your sandbox. Looks like a good start, but you messed some things up.

Here is my fork of your sandbox: https://codesandbox.io/embed/staging-fast-rr5k9

First, don't put react components in the containers, put them in the components folder and import them.

What was going on was, that you had brand new <Router> for every page you had. So I pulled the Router out. Its also not imported correctly. It should be

import { BrowserRouter as Router } from "react-router-dom";

So you pretty much need something like this

      <div>
        <Link to={"/bbc-news"}>BBC</Link>
      </div>
      <div>
        <Link to={"/cnbc"}>CNBC</Link>
      </div>

      <Switch>
        <Route
          key={"fbbc-news"}
          path="/bbc-news"
          render={p => <Channel channelName="BBC" channelString="bbc-news" />}
        />
        <Route
          key={"cnbc"}
          path="/cnbc"
          render={p => <Channel channelName="CNBC" channelString="cnbc" />}
        />
      </Switch>
    </Router>

Where Channel component renders whats inside the channel. the key in Route is important, because it makes React properly trigger componentDidMount, which calls the thunk action which fetches (that one is perfect). Then to access the results from fetch, which you have placed in Redux =>

const mapStateToProps = state => ({ json: state.json });

You don't need a lot of the things you had, so I have removed them, like the onClick, which was trying to do react routers job

routing within an app using react router to move to another page

3 Answers3