0

I am new to React and I am trying to display a link using react-router. When I use my code in my local environment the it works, but when I use in another environment (for example in stackblitz) it doesn't work and I am getting this error:

You should not use <Link> outside a <Router>

Can you please tell me how to fix it so that in the future I can fix it myself?

This is my code for the Link:

<Typography variant="title" id="tableTitle">
  sports
  <Link to={`/sports/add`}>
    <IconButton variant="fab" color="secondary" aria-label="Edit" className={classes.button}>
    {/* <FontAwesomeIcon style={{ margin: '10' }} size='md' icon={faPlusCircle} /> */}  
    </IconButton>
  </Link>
</Typography>

Main.js (Routes):

export default class Main extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path="/sportss/index" component={sports} />
          <Route path="/sportss/add" component={sportsAdd} />
          <Route path="/sportss/edit/:id" component={sportsAdd} />
          <Route path="/" component={Home} />
        </Switch>
      </div>
    )
  }
}

Package.json dependencies:

"dependencies": {
  "@material-ui/core": "3.3.1",
  "@material-ui/icons": "^3.0.1",
  "axios": "^0.18.0",
  "classnames": "^2.2.6",
  "gos-theme": "^2.0.0",
  "lodash": "^4.17.11",
  "marked": "0.3.6",
  "material-ui": "0.20.2",
  "prop-types": "15.5.10",
  "react": "16.6.0",
  "react-dom": "16.6.0",
  "react-js-pagination": "^3.0.2",
  "react-redux": "5.0.5",
  "react-router": "3.0.5",
  "react-router-dom": "^4.3.1",
  "react-scripts": "^2.0.5",
  "react-ultimate-pagination": "^1.2.0",
  "redux": "3.7.2",
  "redux-devtools-extension": "2.13.2",
  "redux-form": "^7.4.2",
  "redux-form-material-ui": "^4.3.4",
  "redux-logger": "3.0.6",
  "redux-promise": "^0.6.0",
  "redux-thunk": "^2.3.0",
  "styled-components": "^4.0.2",
  "superagent": "3.5.2",
  "superagent-promise": "1.1.0"
},

Complete app code can be found here

c-chavez
  • 5,673
  • 4
  • 28
  • 43

1 Answers1

1

I forked your application and tried fixing it. Your App must be inside a BrowserRouter in App.js and the Component you were using must be exported with 

withRouter

The errors don't happen but you must have defined routes with Switch and Route in App.js to make the Link pointing to /sports/new work.

Take a brief look at my project here: https://github.com/dixitk13/simple-react-router/blob/master/src/App.js

Your edited project here: https://stackblitz.com/edit/react-redux-realworld-oayrtj?file=components%2FApp.js

dixitk13
  • 515
  • 4
  • 10
  • thanks for your reply...but the problem is there is a button next to sports text....when you click that button it should show the content of add.js....which has some text fields.... –  Oct 26 '18 at 05:08
  • as I said you'll need to define the Switch and Route for each of these things for the Add to function to show up. For now, I have updated the project here for the add.js to show up when clicked on Add. Also the library 'fa5-pro-light' is not getting installed. I have commented the code for Icons to make the render work. And the import stated below is not default in react-fontawesome, which was causing another problem. import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' demo: https://stackblitz.com/edit/react-redux-realworld-oayrtj?file=components%2FApp.js – dixitk13 Oct 26 '18 at 08:35
  • thanks for your reply now its taking to the form but from the form its not taking back to the grid...can you tell me how to fix it...I have updated the text for the buttons...can you please help me https://stackblitz.com/edit/react-redux-realworld-nhfezl?file=components/Sports/index.js –  Oct 26 '18 at 14:06
  • This is what I did. Added a route "/sports" where the grid/table is displayed. Added route for "/sports/add" for the add.js to show up. Added a default route "/" which redirects to "/sports" so when you hit the empty "/" sports opens up. I think you are misunderstanding react-router, it mounts/un-mounts routes based on the "Route" defined not by having the file("Sports/index") as the "Link". https://stackblitz.com/edit/react-redux-realworld-nhfezl?file=components%2FApp.js – dixitk13 Oct 26 '18 at 15:27
  • hey when you click back this button it should take back to the grid page....can you help me with it ---> ` ` –  Oct 26 '18 at 15:38
  • Hey @injiinji. I did the same thing as mentioned before, by adding the /sports route. Made a new fork for you to see the changes. The two routes go back and forth to each other ("take to form" "back to grid") https://stackblitz.com/edit/react-redux-realworld-v7fmzw?file=components/App.js – dixitk13 Oct 26 '18 at 15:51
  • thankls for your reply...I am trying to achieve api call...can you help me with this one https://stackoverflow.com/questions/53011547/axios-get-requests-and-displaying-in-table?noredirect=1#comment92929914_53011547 –  Oct 26 '18 at 17:44
  • hey I accepted the answer...can you help me with the other question too –  Oct 26 '18 at 17:50
  • thanks for teaching rouyter, now I am trying to learn props. can you help me with this question https://stackoverflow.com/questions/53161600/passing-props-from-card-component-to-tab-component –  Nov 05 '18 at 20:48