Как реализовать переходы по страницам React?

Question

[fuckingawesomenigga]

В мэйне:

class Main extends Component {
    render() {
        return (
            <div className="main">
    	        <Header />
				<Switch>
					<Route exact path='/' component={Home}/>
					<Route exact path='/example' component={Examlpe}/>
				</Switch>
            </div>
        );
    }
}

В Header содержится ссылка:
<Link to='/example'>Text</Link>

При клике на неё адрес меняется, а компонент нет.

Answer 1

[hzzzzl]

должно работать, консоль ошибки какие-нибудь пишет?

component={Examlpe}

Example?

Comments

[fuckingawesomenigga]

Консоль молчит

MAIN

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link, BrowserRouter } from 'react-router-dom';
import s from "./style.css";

import Header from "./header.component";
import Home from "./home.component";
import NewArrivals from "./newarrivals.component";

class Main extends Component {
    render() {
        return (
            <div className={s.awesome}>
    	        <Header />
				<Router>
					<Route exact path='/' component={Home}/>
					<Route path='/new-arrivals/' component={NewArrivals}/>
				</Router>
            </div>
        );
    }
}

export default Main;

HEADER

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link, BrowserRouter } from 'react-router-dom';
import s from "./style.css";

class Header extends Component {
    render() {
        return (
            <header>
        		<Logotype/>
      		</header>
        );
    }
}

class Logotype extends Component {
    onclick () {
        document.querySelector('.'+s.home).classList.remove(s.hide);
        document.querySelector('.'+s.line).classList.remove(s.hide);
    }

    render() {
        return (
            <h1 onClick={(e) => this.onclick(e)} className={s.logotype}>
                <Link to='/new-arrivals/'>Awesome</Link>
                <HeaderLine/>
            </h1>
        );
    }
}

class HeaderLine extends Component {
    render() {
        return (
            <span className={s.line}></span>
        );
    }
}

export default Header;

[hzzzzl]

fuckingawesomenigga,
йо нига, надо весь апп обернуть в роутер, иначе линк вне роутера, и до роутера/до свитча не доходит изменение

class Main extends Component {
    render() {
        return (
          <BrowserRouter>
 
            <div className={s.awesome}>
    	        <Header />

            <Switch>
              <Route exact path='/' component={Home}/>
              <Route path='/new-arrivals/' component={NewArrivals}/>
            </Switch>

            </div>

         </BrowserRouter>
        );
    }
}

[fuckingawesomenigga]

hzzzzl, yo bruh

оно у меня обёрнуто(

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Main from "./component/main.component";

ReactDOM.render((
	<BrowserRouter>
		<Main />
	</BrowserRouter>
), document.getElementById('root'));

[fuckingawesomenigga]

hzzzzl, вот не представляю, куда я тыкнул, что оно заработало

Answer 2

[Prego666]

А если Link не обернут в Route разве он будет работать?

Comments

[fuckingawesomenigga]

Ничего не поменялось