В настоящее время у меня проблема с моей панелью навигации.Когда я нажимаю на него, он даже не меняет URL-адрес.
Примечание. Я просто использую последнюю версию react и react-router-dom": ^4.4.0-alpha.1.Здесь нет лишнего.
Вот это index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './index.scss'
import { BrowserRouter as Router } from 'react-router-dom'
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));
Вот мой App.js Я много вырезал для краткости.
import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./Home";
import Form from "./Form";
import Navigation from "./Navigation";
import About from "./About";
class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: null
};
}
render(props) {
return (
<div>
<Navigation
{...props}
isLoggedIn={this.state.isLoggedIn}
/>
<Switch>
<Route exact path="/" component={Home} />
<Route
path="/about"
render={() => {
return <About />;
}}
/>
<Route
path="/story/create"
render={(props )=> {
return <Form {...props} />;
}}
/>
</Switch>
</div>
);
}
}
export default App;
И наконец, мой Navigation.js
import React from "react";
import { Link } from "react-router-dom";
import Login from './Login'
import { Tab, Tabs } from "react-materialize";
export default function Navigation(props) {
const isLoggedIn = props.isLoggedIn;
let loggedState;
if (isLoggedIn) {
loggedState = (
<div>
<Tab title="Profile">
<Link to="/user/:id/profile">
Profile
</Link>
</Tab>
<Tab title="Log Out">
<Link to="/logout" onClick={props.handleLogOut}>
Log Out
</Link>
</Tab>
</div>
);
} else {
loggedState = (
<Tab title="Login">
<Login
isLoggedIn={props.isLoggedIn}
handleLogIn={props.handleLogIn}
/>
</Tab>
);
}
return (
<Tabs className="">
<Tab title="Home">
<Link to="/">
Home
</Link>
</Tab>
<Tab title="All Stories">
<Link to="/all_stories">
All Stories
</Link>
</Tab>
<Tab title="Write a Story">
<Link to="/story/create">
Write A Story
</Link>
</Tab>
{loggedState}
</Tabs>
)}
Я думаю, что было бы полезно упомянуть, что эта проблема относится только к моему компоненту navbar (функциональному).У меня <Link> ссылки на другие страницы в моем приложении, они прекрасно работают, только эта проблема создает проблему.
Первоначально я думал, что это потому, что я не использовал withRouter, но после просмотра StackOverflow кажется, что это необходимо только при использовании react-redux.
У меня также есть, считается понижением react-router-dom, но я не смог найти других сообщений по этому вопросу, в которых упоминается об этом.Кажется, что большинство других имеют эту проблему только потому, что они не сделали Route exact path="/", но я думаю, что, как я сделал, он все равно должен работать правильно.
Большое спасибо заранее.