У меня есть компонент заголовка, который имеет навигацию в отдельном файле .js.
<Router>
<h1>AshoKart</h1>
<div className = "cart">
<span>Cart (0 items)</span>
<Link to='/checkout'>Checkout</Link>
</div>
<br />
<nav>
<Link to='/'>Home</Link>
<Link to='/about'>About</Link>
</nav>
</Router>
У меня есть сведения о пути маршрута в файле App.js.
<Router>
<Route path = "/" exact>
<Home />
</Route>
<Route path = "/about">
<About />
</Route>
<Route path = "/checkout">
<Checkout />
</Route>
</Router>
Когда я нажимаю на ссылки, это не навигация. Но если я добавлю навигационные ссылки в файл app.js, он будет работать нормально. Подскажите, пожалуйста, как заставить работать навигационные ссылки из отдельного файла?
Спасибо
Удалите <router/>
в компоненте заголовка так же, как в приведенном ниже коде. Теперь он должен перемещаться.
<div>
<h1>AshoKart</h1>
<div className = "cart">
<span>Cart (0 items)</span>
<Link to='/checkout'>Checkout</Link>
</div>
<br />
<nav>
<Link to='/'>Home</Link>
<Link to='/about'>About</Link>
</nav>
</div>
Избавьтесь от
<Router>
в файле компонента. Ваши компоненты уже встроены в компоненты приложения.