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

Answer 1

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