Navigation between the pages

Question

I'm relatively new to ReactJs. Consider, we have following code:

index.js

import {BrowserRouter as Router, Route} from 'react-router-dom'
import MyComponent1 from 'path/to/component1'
import MyComponent2 from 'path/to/component2'
import App from './App'

**** 

const WrappedApp = (
  <Router>
    <Route path={App}/>
  </Router>
)

ReactDOM.render(WrappedApp, document.getElementById('root'));

App.js

import React from 'react'
import {Switch, Route} from 'react-router-dom'
import MyComponent1 from 'path/to/component1'
import MyComponent1 from 'path/to/component2'

    export default class App extends React.Component {
     render() {
       return (
         <Switch>
          <Route path='/' component={MyComponent1}>
          <Route path='/2' component={MyComponent2}>
         <Switch>
        )
     }

Problem

MyComponent2 has button, with onClick/submit should redirect to another component, that is not specified in router.

How could i archieve that? Im using React Router 4.x

Many thanks for examples and suggestions

Have you tried to use [`Redirect`](https://reacttraining.com/react-router/web/api/Redirect) component from `react-router v4`? — The Reason, Jan 05 '18 at 14:12
Possible duplicate of [Programmatically navigate using react router V4](https://stackoverflow.com/questions/42123261/programmatically-navigate-using-react-router-v4) — The Reason, Jan 05 '18 at 14:14
Possible duplicate of https://stackoverflow.com/questions/44127739/programmatically-navigate-using-react-router/44128108#44128108 — Shubham Khatri, Jan 05 '18 at 14:15
You need to specify the route in the router that you need to navigate to — Shubham Khatri, Jan 05 '18 at 14:15

score 2 · Accepted Answer · answered Jan 05 '18 at 14:39

2

I don't know how your component2 is developed, but I see an error here:

import MyComponent1 from 'path/to/component1'
import MyComponent1 from 'path/to/component2'

Maybe you want to do:

import MyComponent2 from 'path/to/component2'

And you can also import Link from React Router, like this:

import { Link } from 'react-router-dom'
<Link to="/about">About</Link>

See the docs here

answered Jan 05 '18 at 14:39

Damian Peralta

1,846
7
11

about imports - thats a typo. But yea, Links was the last thing to come up with. – Malakai Jan 05 '18 at 14:44

Navigation between the pages

1 Answers1